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.
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 simple layout composed of boxes.
Fiddle of the code
I have <div> tags within <div> tags; I'm using them to 'define' blocks where I can later print out inputs.
<div class=display-window>
<div id=pieces>
</div>
<div id=vline></div>
<div id=message>
<p>Nothing special is going on</p>
</div>
</div>
When I take the <p> element out, the display is fine. But when it's there, the box slides down, making it way off. This is true for both #pieces and #message, here. It seems that the box slides until the paragraph is against its top. I want the box to stay there.
Shouldn't child elements leave their parents undisturbed if they can?! This feels very inflexible!
Note: I get widely different results between codecademy.com and fiddle.net, so it's difficult for me to tell what is going on exactly. Margins and padding solve the problem, but this is, again, inflexible: I want to remove the tags during execution.
This has to do with your inline-block style elements. By default, all inline-block elements have a vertical-align set to baseline, which in your case is the bottom [line-height] (probably 16px) of your vertical line (div#vline) in the middle of your div.
Set the v-align to top on the p element's container and it works great:
#message
{
vertical-align: top;
}
JSFiddle
I came across an interesting HTML button tag behavior while trying to style a button that has no text inside, only a font icon -- the button without text causes all subsequent buttons which do have text to be pushed down. The issue only appears when the buttons have a height attribute specified.
JSFiddle
<header>
<button><!-- No text here --></button>
<button>This button is pushed down</button>
</header>
button { height: 40px; }
At first I was sure it was due to the font icon inside the first button that did some weird baseline magic, but as you can see from the minimal working example, the behavior is maintained when there is no content at all inside the button.
I can fix this by adding content to the first button, but because my only content is a <span class="icon user"></span>, which is a font icon, it does in fact interfere with the font baseline, and positions the button off just a few pixels. This is why I have decided to position the icon inside absolutely, which fixes the original slight positioning issue, but introduces this new one, as the button now acts as if it were empty.
So, the question remains -- how do I avoid positioning issues with empty buttons?
Note: it seems that the above only happens on webkit browsers; Firefox positions buttons with text correctly, but pushes the empty ones up.
It is because the button is an inline element, which is aligned to baseline by default.
From W3C :
Align the baseline of the box with the baseline of the parent box. If
the box does not have a baseline, align the bottom margin edge with
the parent's baseline.
Inorder to align them correctly, use vertical-align: top; (Or middle, bottom as a value)
button {
height: 40px;
margin-left: 5px;
vertical-align: top;
}
Demo
On the other hand you can also use zero width space entity - Demo
This behavior is common with inline and inline-block elements, if you want to avoid everything above, you can use float here, than you won't need the vertical-align property as float will force the button to be inline as well as block level
Demo (Using float: left;)
Note: If you are going with float, just make sure you clear them, if you aren't sure what clear means, than refer my answer
here which will explain in detail.
add text to the button and indent the text off the screen. This will solve your problem as well as helping with your SEO as robots indexing your site can register text but not the content of the image.
button{
width:;
height:;
display:block;
text-indent:-9999px;
}
Simple question: I need an image to appear in the middle of a paragraph of text, however, the image is slightly larger than the height of each line of the font, so it pushes open a horizontal "gap" in the text to make room for itself. To fix this, I could:
1) Shrink the image, so that it is not larger than the font.
2) Use Position:Absolute
But I don't want to shrink it any further, it is small enough already to "technically fit" between each line of text, except that it would need to use up a few pixels of the white area above and below the line of text it is in.
And I can't use position:absolute, because then the image's position would be in the top left corner of the window, instead of in the paragraph where I want it.
I thought perhaps I could put a dummy "placeholder" image of size 1 pixels into the paragraph. Then, use Position:Absolute on my real image, and continually set my real image to be at the same location where the dummy image is. I haven't researched to see if that is possible, but it seems a bit excessive for such a simple thing. Is there an easier way?
EDIT: I found that adding: margin:-20px; to the image's style works!!!
margin:-20px;
JSFiddle example: http://jsfiddle.net/j7tLX/3/
Images are block level elements if you want them to appear inline with the paragraphs. Do this.
img {
display: inline;
}
You can use vertical-align: top
http://jsfiddle.net/j7tLX/4/
See http://css-tricks.com/what-is-vertical-align/
I've got two table-cell divs next to each other, but for some reason one has what seems to be a giant margin-top that I'm not creating, and I don't have any idea why.
<div style="display:table;">
<div style="display:table-cell;">
<img src="http://a0.twimg.com/profile_images/3181865974/b3583cd60d3d21ea9b9776634084b710_normal.png" />
</div>
<div style="display:table-cell;">
<div>Your compiler finds a big block of commented-out code… It knows it shouldn't look… Takes the tiniest of tiny peeks… BLUSHES BRIGHT RED.Your compiler finds a big block of commented-out code… It knows it shouldn't look… Takes the tiniest of tiny peeks… BLUSHES BRIGHT RED.</div>
</div>
JSFiddle: http://jsfiddle.net/HycBx/
You have both cells with the same height. The space on top is because the text is defaulting to a vertical align of "baseline".
Add the css to your cells:
vertical-align: top;
The default vertical alignment for the cells is the baseline. You will notice that the image and the first line of the text actually share the same baseline, hence the alignment. This is irrespective of the display property, and you can see the same behavior without splitting the display into cells:
http://jsfiddle.net/ExplosionPIlls/HycBx/2/
The simplest fix is probably to change both cells to have the same vertical alignment. I think vertical-align: middle works best.
http://jsfiddle.net/ExplosionPIlls/HycBx/3/