Lets take two images as an example
With float: left;
Without float: left;
HTML
<h6><span>Sign Up</span></h6>
CSS
h6:before {
content: url("images/arrow.png");
padding-right: 8px;
float: left; // Here lies problem
}
Question
Why without float: left; text (Signup) goes down ? What's science behind this ?
The default display mode of a pseudo element is display: inline; and the default vertical alignment is vertical-align: baseline;. This means that the image will be aligned to the baseline of the text.
When you float an element its display mode becomes display: block; and it is removed from the document flow. Vertical alignment is no longer a factor and in this case the top edge of the span is now aligned with the top edge of the floated pseudo element.
As Luis P. A. and Paulie_D allude to in the comments, changing the vertical alignment will allow for the non-floated pseudo element to be aligned to the middle of the text:
h6:before {
content: url("http://placehold.it/20x20");
display: inline-block;
padding-right: 8px;
vertical-align: middle;
}
h6 span {
vertical-align: middle;
}
<h6><span>Sign Up</span></h6>
Related
I'm trying to make a header for my web page with one element in the middle of the header, and one right-justified in the header.
The only ways I could think of doing it was:
Using float - JSFiddle
#centerHeader {
display: inline-block;
height: 100%;
vertical-align: middle;
}
#socialLinks {
height: 100%;
display: inline-block;
vertical-align: middle;
float: right;
}
Using absolute positioning - JSFiddle
#centerHeader {
display: inline-block;
height: 100%;
vertical-align: middle;
}
#socialLinks {
height: 100%;
display: inline-block;
vertical-align: middle;
position: absolute;
right: 10px;
}
The problem is that with both of these methods, the social links/images no longer are vertically aligned to the header, but rather are hugging the top of the page despite me setting them to inline-block with a height of 100%, and vertical-align: middle. (source of my reasoning for trying this vertical align method)
With the float method, there appears to be the additional problem of the centered element not actually being horizontally centered within the header, but rather placed next to the social links and centered within its own div which is not what I'm looking for.
Any pointers on how I could achieve the desired result of having a horizontally centered element with right-justified elements all inline and vertically centered would be much appreciated!
one solution is to add relative to the Header Wrapper and positioning the social links properly using the absolute top value.
Updated JSfiddle
#homeHeader {
height: 75px;
padding: 10px;
text-align: center;
background-color: #181818;
border-bottom: 1px solid #505050;
position:relative;
}
#socialLinks {
position: absolute;
right: 10px;
top:50%;
margin-top:-20px; //considering the social links are 40px height
}
This question already has answers here:
Why is vertical-align: middle not working on my span or div?
(19 answers)
Closed 9 years ago.
Here is my code.
I have added the vertical-align property for the spans in the div with ed_button class but the third, fourth and the fifth boxes are displaying the spans at top positions not in the middle.
Am I doing anything wrong here?
You need to give the outer-div display: table. And float: left will fulfill your purpose of horizontal alignment.
.ed_button{
display: table;
float: left;
margin-right: 3px;
}
and the inner-div should have display: table-cell
.ed_button span{
display: table-cell;
vertical-align: middle;
}
Check out the DEMO here.
vertical-align property will work for table or table-cell
JSFiddle
since you have fixed dimension, i would suggest to remove span from multi-line and instead use line-height = div height trick for the purpose of single-line text
.ed_button span {
vertical-align: middle;
height: auto;
line-height:40px;
}
demo
I have added this to the CSS Part
.ed_button {
display: table-cell;
vertical-align: middle;
border-right: 5px #FFFFFF solid;
}
Working Fiddle
.ed_button{
background-color: #F9A11A;
clear: both;
float: left;
font-size: 14px;
height: 40px;
margin-bottom: 10px;
text-align: center;
width: 120px;
}
Use this css style for your code it 'll work fine
None of your text are alligned in middle. It is just beacause there is more text in the 1st and 2nd box that it seems to be in middle.
You can also try padding-top, margin-top or Position properties of css.
I have a span with a background image, but it aligns differently without text in it, how can i have them aligned independent of the content?
For this it has to be inline-block and it has to be a css only solution.
Here is an example.
HTML:
Test
<span class="test">Blafffff</span>
<span class="test"></span>
CSS:
.test
{
display: inline-block;
line-height: 30px;
border: none;
height: 30px;
width: 120px;
text-align: center;
margin-top: -15px;
background: url("http://i.imgur.com/vYiCjoF.png") no-repeat;
}
EDIT: Thanks for the answers so far, but it has to align with the other text around it, i updated the example
You are using display: inline-block; so the span will align to the baseline, hence use vertical-align: top; to align them consistently.
Demo
.test {
/* Other properties */
vertical-align: top;
}
Alternatively, you can also use float: left; here, than you won't need vertical-align property, but than you need to make sure that you clear the floating elements.
For more information on float and clear, you can refer my answer here and here.
http://jsfiddle.net/9YUdb/2/
.test
{
display: inline-block;
float: left;
}
To align with the text around it, you'll need to give the span some content. You can do that with a :before pseudo-element. Putting it a zero-width non-breaking space will do the trick. i.e.
.test:before {
content: '\FEFF';
}
See http://jsfiddle.net/9YUdb/6/
I'm trying to place buttons on the left and the right side of a scrollable div. See this jsfiddle[1] where they are still wrapped. So I changed the display of content and btn to inline-block. See this next version of the jsfiddle[2]. That sort of worked, but the buttons are not nicely aligned. And I actually don't have any idea why. So how come and why is that?
I am confused with you saying buttons are not nicely outlined, but I guess you meant align, than you have to use vertical-align: top; as you are using display: inline-block; so your buttons are aligned to the baseline.
.btn {
width: 30px;
height: 40px;
display: inline-block;
vertical-align: top;
}
Demo
You can also float all your elements to the left as #Jarno suggested, but if you are going with float than make sure you clear your elements using clear: both; property, else you will end up with undesired positioning of your elements.
make all elements floating ~> DEMO
.content {
width: 300px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
height: 40px;
display: inline-block;
float: left;
margin: 0 10px;
}
.btn {
width: 30px;
height: 40px;
display: inline-block;
float: left;
}
OR you can use vertical-align for elements to fit each other vertically
You could use float:left; on .content and .btn.
Also, don't forget to put overflow:hidden; on your .container.
Example
You need to add float positions to each .btn. float left for the left arrow and float right
Add the vertical align to the buttons:
.btn {
width: 30px;
height: 40px;
display: inline-block;
vertical-align: top;
}
http://jsfiddle.net/y84VA/7/
Im trying to make a picture display inline with text on it's right, AND at the same time positioned in the middle of the vertical axis to fit in the navigation bar.
At the moment, I can only get it to display inline but it always verges to the bottom of the bar rather than the top.
HTML:
<div id='profileBar'>
<img src='karl.png' width=25 id='profileBarPic'/>
Damen
</div>
CSS:
#profileBar {
float: right;
padding-right: 10px;
}
#profileBarPic {
width: 25px;
display: inline;
float: left;
padding-right: 10px;
}
What it looks like:
Text next to an image? That's how images have always worked. You can get the desired affect with a lot less markup:
<div id='profileBar'>
<img src='http://placekitten.com/50/50' id='profileBarPic'/>
Damen
</div>
And CSS:
#profileBarPic {
vertical-align: middle;
}
Fiddle
A little explanation. img is basically an inline element to begin with, so adding float and display: inline is not necessary.
By default img aligns with the baseline of its container (the bottom edge of an image will align with the bottom of a text line it is next to). vertical-align changes where the img should align itself to (in this case, you wanted the middle).
Try uploading a fiddle next time, I think this should fix it though:
#profilebar {
float: right;
padding-right: 10px;
display: table-cell;
vertical-align: middle;
}
put your text into a span or something so that you can put a display:inline-block on both it and the <img>. This way, you won't need the float:left. Then apply a vertical-align:middle
so:
HTML:
<div id='profileBar'>
<img src='karl.png' width='25' id='profileBarPic'/>
<span>Damen</span>
</div>
CSS:
#profileBar {
float: right;
padding-right: 10px;
}
#profileBar span {display:inline-block; vertical-align:middle; }
#profileBarPic {
width: 25px;
display: inline-block;
vertical-align:middle;
padding-right: 10px;
}