vertical-alignment | 易学教程

How to vertically align items in horizontally ul list with images?

阅读更多关于 How to vertically align items in horizontally ul list with images?

I have the following html code: <div id="footer"> <ul id="yw1"> <li><a href="/index.php/site/login">About</a></li> <li><a href="/index.php/site/login">FAQ</a></li> <li><a href="http://twitter.com"><img src="/images/twitter_icon.png" /></a></li> <li><a href="http://twitter.com"><img src="/images/facebook_icon.png" /></a></li> </ul> </div> And the following CSS styles: #footer { margin-top: 25px; background: #000000 url(images/background.png) repeat; padding: 25px; box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, .2); } #footer ul { margin: 0; padding: 0px 0px 0px 0px; list-style: none; line-height:

Vertically align text to the bottom of the box?

阅读更多关于 Vertically align text to the bottom of the box?

I made box and I set line-height, the text is automatically vertically center. Is there a way or any kind of trick to set the text on the bottom of the box? div { width: 100px; height: 100px; background: #eee; color: #333; text-align: center; line-height: 100px; vertical-align: text-bottom; } <div>FoxRox</div> Setting the height of the div and the line-height of the text to the same value, 100px in your case, is a method of vertically centering the text within the div. That's the problem. Changed line-height and removed useless vertical-align => it's displayed at the bottom now http://dabblet

How to place text at the bottom when there's predefined height!

阅读更多关于 How to place text at the bottom when there's predefined height!

This should be incredibly trivial, but it's not. I have a predefined height for an anchor, and I would like to place the text at the bottom. <li><a class="my-text">My Text</a></li> I used the following CSS, which does not work. The text still appears at the top. a.my-text { background-color:#cccc; height:50px; vertical-align:bottom; width:100px; } The idea is: I want to align text to the bottom, but if there is text that is longer than one line, I want the over flow to go to the top, not push everything else down... any ideas of how this could be achieved? This can't be done using css and the

H1 on the left, “buttons” on the right, vertically aligned

阅读更多关于 H1 on the left, “buttons” on the right, vertically aligned

I'm trying to display on one line: a H1 element aligned to the left of the containing box several "buttons" (A elements here) aligned to the right of the containing box all being on the same baseline Is it possible to do this with minimal markup (i.e. no wrapping elements) and without having to set precise heights, line-heights, margin-tops, etc. <div id="block1"> <h1>What a great title</h1> <a href="javascript:void(0)">This link can kill you</a> <a href="javascript:void(0)">Click if you dare</a> </div> The fiddle here shows what I feel are two incompatible directions (inline-blocks and you

Vertical align using jquery for all devices?

阅读更多关于 Vertical align using jquery for all devices?

问题 I found as problematic thing to align vertically some elements on page, without changing some others elements layouts. The problem is magnified on mobile devices. So many screen sizes, resolutions, portrait, landscape... var x=window.innerHeight - $('#myDiv').height(); $('#myDiv').css ('margin-top', x/2); This should be ok for all devices, mobile and desktop. Do you see any downside of these approach? As I understand, all devices today support JavaScript. But, is it possible that some device

Why are images centered vertically with `line-height` positioned 2 pixels below where they should be?

阅读更多关于 Why are images centered vertically with `line-height` positioned 2 pixels below where they should be?

Short story: jsfiddle here . The behavior is consistently wrong in Chrome 21, Firefox 15 and IE9, which makes me think I'm misunderstanding something about the CSS spec. Longer story: I want to center an image vertically using line-height. I've set the height of the image container equal to the line-height, I've reset margins, paddings and borders for all elements, yet the image is 2 pixels below where it should be. This happens whether the image is smaller than the container, or larger than it (in which case I used max-width: 100; max-height: 100% to size it down). The image has an even

Vertical alignment with CSS

阅读更多关于 Vertical alignment with CSS

Yeah, yeah, I know this is yet another question about vertical alignment with CSS and it's been done a million times before. Rest assured that I have come across this problem many times and I've already done the reading about various ways to centre vertically with CSS. I'm asking here because none of those ways do quite what I want to do, and I just want to make sure that my suspicion (that CSS vertical alignment is broken and will not do what I want it to do) is definitely correct. First up, here's my test case: http://www.game-point.net/misc/testAlign/ Here's the criteria: I want to align

List Items Middle Vertically Aligned

阅读更多关于 List Items Middle Vertically Aligned

I have the following HTML and CSS that creates a list, where the list items have a min-height set. I would like for the contents of the list items to be vertically aligned in the middle instead of the top if there is not enough content to fill the entire height. How the heck do I pull this off? <html> <head> <style type="text/css"> ul { width : 300px; list-style-type: none; } li { min-height : 45px; vertical-align : middle; border-bottom : 1px black solid; } </style> <head> <body> <ul> <li>Testing testing 1234</li> <li>Testing testing 1234 Testing testing 1234</li> <li>Testing testing 1234

d3.js: vertical alignment of text in a donut chart

阅读更多关于 d3.js: vertical alignment of text in a donut chart

I've got a simple donut chart in d3.js, which will only be used to compare 2 or 3 items. http://jsfiddle.net/Ltqu2/ I want to combine the legend and values as text in the center of the chart. In the current implementation, the text alignment is ok for 3 items, but for 2 items it doesn't adjust. The alignment is somewhat hard coded: var l = svg.selectAll('.legend') .data(data) .enter().append('g') .attr('class', 'legend'); l.append('text') .attr('x', 0) .attr('y', function(d, i) { return i * 40 - radius / 2 + 10; }) .attr('class', function(d, i){return 'legend-label data-label value-' + (i+1)})

CSS how to position element in half height (vertical 50%)

阅读更多关于 CSS how to position element in half height (vertical 50%)

问题 I'm looking forward to build a tooltip which is positioned next to the element. It's easy to put it over and under in the center of element. But is there a way to do so vertically (on the right or left side of element vertically positioned in a middle of elements height)? For my purpose, height of the element is known & height of tooltip is not. And tooltip can be a child of element. But, I'm also curious about how to do it when both heights are unknown. By heights I understand element's and