I tried to vertically align a span in a div by css line-height and div height.
All works fine, but the center span shifts to the bottom when the icon span is added.
Could anyone give me a hint? Thanks.
<span class="icon"></span>
Failed at vertical align
http://jsfiddle.net/9CJvm/
Works fine without icon span
http://jsfiddle.net/9CJvm/1/
In this instance, you could add vertical-align:middle to the span.icon element:
The default value for the vertical-align property is baseline; thus the element was being aligned at the base of the parent element.
UPDATED EXAMPLE HERE
.icon {
vertical-align:middle;
background-repeat:no-repeat;
background-image:url(https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash3/50264_300699565862_8082907_q.jpg);
height:50px;
width:50px;
display:inline-block;
}
You can use vertical-align:middle for both span.center and span.icon.
Related
I have built a content div with three further divs who have the
display:inline-block;
attribute. One of them contains another div element which has some audio controlls. The right div has a really big margin! Chrome and Firefox don't show any margins or paddings. If I delete the #music element, everything is okay.
Here is a live demo
Thanks for helping
Because you are using the display: inline-block; definition, your content is verticaly aligned to baseline by default.
Apply this on your .frames class:
vertical-align: top;
Problem solved. ;)
if you add float:left to #music it gets fixed _
as suggested using clearfix on parent element doesn't hurt:
.parent:after{
display:table;
content: "",
clear:both
}
You can see here in this fiddle that the text isn't sitting vertically center after I apply the :before pseudo:
FIDDLE
.explore:before {
content: url('../images/explore.png');
margin-right:5px;
}
I've tried to adjust the line height but it doesn't affect the text in any way.
Any ideas as to why it knocks down my text and how I can fix this problem?
Add vertical-align: top;
http://jsfiddle.net/bfkv8zsq/3/ Here you go!
I have the following fiddle, not able to align the image using :after in my case, it is not as bad as in fiddle, but it is touching the horizontal line more towards the bottom of the box foreach div instead of aligning with the text inside div.
http://jsfiddle.net/pT7vX/
Just change your position to relative, and tone down the padding. At least I assume this is more what you're after.
div.lnk:after {
background:image;
content: ">";
position:relative;
padding:5px;
background-repeat:no-repeat;
}
http://jsfiddle.net/pT7vX/1/
hope this helps.
I am trying to center some 3 lines text vertically on this example that i am playing with
http://thejit.org/static/v20/Jit/Examples/Treemap/example1.html#
But i noticed I cannot use line-height or height in this situation. Is there any other way of vertically centering without using height or line height?
//this code below doesnt work right
.node {line-height:8em;}
.node p {display:inline;display:inline-table;display:inline-block;
vertical-align:middle;}
You could try display:table and vertical-align:middle
So, it would be something like
.node{
display:table;
}
.node p{
display:table-cell;
vertical-align:middle;
}
Not sure it would work given the current layout of the example.
I have a php script that is generating an unspecified number of divs inside another but by default the divs are being vertically aligned as in one of top of the other though their widths can allow for them to be horizontally aligned. How can i go about this?
div > div{
display: inline-block;
}
float them to left
float:left;
or give them inline display mode.
display:inline;