vertical-align: middle means the image's vertical center is lined up with the adjacent text's baseline. I need to line up the text's center with the image's center. Is this possible with just CSS? Trying to set line height on the adjacent text has proved futile as the image just realigns to compensate for it and none of the built in vertical-align values do what I need.
put the text into a <span> element and give that vertical-align: middle, too
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
According to MDN specs there is no vertical-align value that will do what I want. In-depth explanation of what the renderer is doing when aligning elements: Why is this inline-block element pushed downward?.
Related
i'm trying to fix the position of a div while this div's alignment is centered, but when i enter position (whether fixed or absolute) alignment to center is disturbed. what's the cause?
#stage {text-align: center; position:fixed;}
You need to define a width for the fixed-position element. By default it is only as wide as its contents and aligned to the left top.
The way you describe it, probably width: 100% would be the adequate value, which stretches the element across the whole width, in which case the text-centering you applied will be effective.
I found many techniques about how to vertically center some text within a div, but all those techniques depend on fixed dimensions. Is it possible to achieve when the div's height and width vary as they're expressed in percentage?
You may try to add the line display: table-cell; to your css for that div
JSFiddle Demo
So I have this plunker:
http://plnkr.co/edit/g5AZfKGeDVNAICPPt4WR
It has 2 divs both with a svg element in them and the only difference is that the bottom svg element has a vertical-align: middle and the top one does not.
My question is why when I add a vertical-align: middle to the svg element does the parent's height change from 20px to 18px? I mean the svg element's height remains at 16px regardless of the vertical-align property.
inline-block elements are standing on baseline if you do not reset vertical-align.
This means that you have underneath a little gap, about 0.2em, wich is room used by letters such as : jpq...
Once you reset vertical-align to middle, top, bottom, ... , this gap fades away when not needed anymore.
See W3C as reference : http://www.w3.org/wiki/CSS/Properties/vertical-align / http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align and within table-cell (td or displayed as such) <table> context : http://www.w3.org/TR/CSS2/tables.html#height-layout :)
I'm trying to get a div with css property display:table-cell; vertical-align:middle to behave as it "should". My expectation is that text inside these divs would be vertically aligned regardless of whether it's wrapped in an anchor or not.
Here's a jsfiddle: http://jsfiddle.net/smittles/GsKg6/
What am I doing wrong that prevents the vertical-align property from rendering the text out centered vertically, in the same way the header does in this example.
There is no need to use display: table-cell or even float anywere in this example.
To vertically center the text in the header, set the line-height of the <h2> to match the height of #h2wrap. Or remove height from #h2wrap and increase its top and bottom padding instead.
To vertically center the images, labels and the buttons within the <a> tags, set their display to inline-block and add a vertical-align: middle. You will have to explicitly set their widths and also eliminate the extra spaces caused by inline-block, but I believe this would be the easiest solution.
If you have multiple lines of text line-height will not work.
See this for the ways of applying vertical align. The line-height won't work with text that needs to wrap (which I believe you have). You'll have to use display: table-cell.
How do I vertical align floating elements?
I currently have 3 elements (an image floated left, another image floated right and a div with a margin:0 centered) in a wrapping div. These are currently aligned at the top but I want them to aling at the bottom of the div.
How can this be achieved without using position absolute on them as this is a responsive layout? I have tried making them display:inline-block and vertical-align: bottom but that does not help anything.
In order to use vertical-align on some element, that element must have display:table-cell; css style. http://jsfiddle.net/StPYR/
Your jsfiddle updated: http://jsfiddle.net/chCjT/16/
Instead of floating the elements you need to give them display:inline-block; css property