I have a line of text and a small image, which I am trying to align vertically within the line. My goal is to align the vertical center of the image with the x-height (or half of the height of a capital letter) from the baseline of the text. I can't figure out any way to do this. The closest thing that I know of is:
vertical-align: middle;
This behavior as it is stated in the CSS 2.1 spec:
Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent
If there were a way to remove the world "half" from that definition, I'd have what I want. How do I accomplish this?
The problem is, text sits on the text baseline while the image descends below that. And different browsers handle that differently.
My favorite solution is to display the image as a background-image, with its background-position set to left center ... you can season to taste.
Don't know if it's the "best" answer, but I would always set the "line-height" of my text to match the height of what I'm trying to center it in.
Here is the vertical align center.
http://www.templatespoint.com/blog/2010/10/div-vertical-align-middle/
or use image as background image
background:url(bg_image.jpg) no-repeat left center;
Related
I'm trying to vertically align some text in a div by setting the line height equal to the div height. This works just fine when there's just text in the div, and also when there's a small image in the div. But for some reason, when there's an image beyond a certain size in the div, it starts pushing the text downward. Check out this fiddle I made to demonstrate it.
In the fiddle are 4 divs that all have height: 40px and line-height:40px. The only difference is the the 2nd, 3rd & 4th divs also have images of size small, medium and large:
.small{height:20px;}
.medium{height:30px;}
.large{height:40px;}
So why are the third fourth images messing up the vertical alignment?
You need to add vertical-align: middle to your img tag, because it's not inline element, its inline-block element.
See updated Fiddle
Note that your vertical alignment method will not work when your text will be more than 1 row. Use for alignments flexbox, there are really good things :)
There a small space below every image. By default, an image is rendered inline (actually it's inline-block), like a letter. It sits on the same line that other letters sit on. There is space below that line for the descenders you find on letters like j, p and q.
You can adjust the vertical-align of the image to position it elsewhere. In this case vertical-align: middle; would be fine.
This answer describes the issue in details: Mystery white space underneath image tag
Vertical align is one of those things they never got quite right - try googling some articles around it.
My instant reaction here is to try vertical-align:middle on each of your images - but no guarantees - I've always had to experiment and you may get varying results from different browsers.
The only all-browser answer I've found is to create a 2-column table (maybe within the div box, but not necessarily) and put text in one cell (text is automatically vertically centred in table cells) then put the matching image in the next cell (which will automatically expand to the height of the image).
Aren't tables brilliant? (some people don't think so...)
I have a div, I need ALL the elements inside to be centred, this includes; text and some images.
.class {
text-align: centre;
}
Works, however is there a better (best practice) Way to do this? I tried fiddling with margins etc... and it worked up until I resized to browser windows, any images that moved down (next row) were automatically aligned left?
What I am asking is there a css class similar to vertical-align but for aligning elements horizontally?
text-align: center (not centre) is your best bet. There are things you can do to prevent the items from breaking to a new line, such as setting a (max-)width on images inside this div based on media queries. But as far as aligning them in the center goes, just use text-align and if you want to break to a new line, a simple br will do the trick.
You said you played with margins. If you want to space elements out on the same row, keep using the margin property, but in addition to the text-align on the parent div.
You may use margin to horizontally align
margin: 0 auto;
http://jsfiddle.net/knzg410f/
alternate way :
to align horizontally you could use paragraph tag:
<p align="center">your text here</p>
http://jsfiddle.net/3Lz59zca/
Why is it that when you add text into one of two centered <div>s that it shifts vertically?
Here's an example: click here
Two child divs with display:inline-block; centered by the parent div using text-align:center; are centered right next to each other nicely when there is nothing inside of them, but as soon as there is even one letter of text that div shifts vertically.
This happens only with text. How do you fix this?
EDIT: This happens with img elements too. Am I the only one that finds this odd?
You should specify vertical-align to either top, bottom, or middle.. This will control the alignment no matter the content.
EDIT: The reason why this happens is because vertical-align defaults to baseline, which attempts to align the baselines of the content. For example, two boxes with text, one with twice as much as the other, would be aligned in such a way as to have the last line of text in each box vertically aligned to each other.
Because your one box has no content, the baseline is set to the bottom of the box.
I have a div, which contains an image and a span. I would like the text in the span to be middle-aligned with the image. Naturally, I made a fiddle for your convenience.
Here is the HTML:
<div id="legend">
<img src="http://fate.holmes-cj.com/plus.png"/>
<span> * 5</span>
</div>
Here are some of the things I've tried:
span {vertical-align:middle;} seems to do nothing.
span {vertical-align:top;} aligns the text to the top of the image. You would think that if top works, so would middle.
span {vertical-align:20px;} gives me what I want, but it depends upon (and interacts with) the div height, the image height, and the font size.
adding display:table-cell has been suggested elsewhere on SO, but seems to do nothing in Chrome.
You can see the problem in context at my Fate Dice Roller. Click on "roll" a few times, and then mouse over the histogram. You get some neat stats on your dice rolls, but the text portion is misaligned.
Am I just out of luck here, or is vertical alignment really supposed to be this messy? I would love a solution that doesn't have to be tweaked when I change the font size.
Here you go: http://jsfiddle.net/nYbwf/3/
Just vertical-align: middle on the image element, that way it will align vertically right in the middle instead of baseline.
I'm trying to achieve the following: I have a central div (wrapper) exactly in the center of my page, both vertically and horizontally. Inside that div I want to have another 2 divs, one of which will contain a logo and the other some text. The logo image also has to be aligned vertically and horizontally to the center of its div. Currently this is what I have:
Here's the jsfiddle with my HTML and CSS: http://jsfiddle.net/7cQhG/
How can I center the logo div (only centered horizontally, and have a 10px margin-top) and have the logo image centered inside that div, both horizontally and vertically, just as it is now)?
Is there any reason you have to have the logo as an img?
I've taken the starting point you gave, and put together a jsFiddle fork : http://jsfiddle.net/mori57/HDmkZ/
I've taken out the img tag, and used it as a background image. "center center" should theoretically center it within its container, and as it's a transparent png, your background color still shows up as you wanted.
Let me know if this works for you, or if you have any other questions.
As a sidebar, you really don't need (and you really shouldn't) to specify your tags in your CSS. The only place that's really appropriate is if you're assigning defaults to a specific tag... otherwise, rules of specificity are already going to take over when you're using those IDs you've got in there.
Note that I wasn't clear what you wanted to do with the text below the logo, so I didn't do any styling, there.