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.
Related
I have spent countless hours yesterday and today to figure out how to do this. I cant believe CSS doesn't have an easy way to handle this.
Essentially, I have some text within a span class="name" whose length is not fixed. In certain instances, it can spill over to the next line. How do I vertically align this within my container.
More specifically, how do I vertically align "ABC Father And Sons Company LLC" within my container?
http://jsfiddle.net/D3L8S/
<div class="container">
<span class="name">ABC Father And Sons Company LLC </span>
Address
Hours
More
</div>
css classes
// CSS
.container {
background: #DDEBF0;
padding: 11px;
border: 1px solid #D2D2D2;
width: 380px;
margin-bottom: 10px;
height:18px;
line-height:18px;
display:inline-block;
}
.name {
width:200px;
float:left;
}
.addr, .hours, .more {
width:60px;
float:left;
}
If I add a negative top margin to "name" (margin-top:-8px), I can achieve this but it obviously messes up rendering for XYZ Company LLC
http://jsfiddle.net/FM4dA/
The solution should ideally be Cross-browser compatible (atleast ie8 should support it)
EDIT - I forgot to mention initially that my container width is fixed and cannot be changed.
Here is one way of doing it using inline blocks:
.container {
background: #DDEBF0;
padding: 11px;
border: 1px solid #D2D2D2;
width: 380px;
height: 50px;
line-height: 50px;
margin-bottom: 10px;
display:inline-block;
}
.name {
width:200px;
display: inline-block;
vertical-align: middle;
line-height: 1;
}
.addr, .hours, .more {
display: inline-block;
vertical-align: middle;
line-height: 1;
}
First, make sure to leave enough vertical space for multi-line names, so on .container,
I used height: 50px and line-height: 50px.
However, you need to reset the line-height: 1 (or some suitable value) on the child elements otherwise the interline spacing will not be attractive.
Then, instead of floats, use display: inline-block and vertical-align: middle on the
child elements (.name, .addr, .hours, .more).
See demo at: http://jsfiddle.net/audetwebdesign/Wp84v/
Note: You may not need to specify the width on .addr, .hours, .more, so I let the
widths take on the shrink-to-fit value.
One way to vertically align div's contents is to use the vertical-align css property. But it works only on display:table-cell elements. So, wrap your container into a display:table div, and change the container display to display:table-cell.
Like this: http://jsfiddle.net/D3L8S/2/
Try this, It might help somebody
.name {
width:200px;
float:left;
margin-top:-8px;
word-wrap:break-word;
text-align: center;
}
DEMO
When you want to vertically center multiple lines, put the text into an inline block then pretend that the inline-block was a single line of text.
.container {
background: #DDEBF0;
padding: 11px;
border: 1px solid #D2D2D2;
width: 380px;
margin-bottom: 10px;
height: 18px;
line-height: 18px
display:inline-block;
}
.name {
width:200px;
float:left;
margin-top:-8px;
display: inline-block;
vertical-align: middle;
line-height: 14px;
}
NOTE:
Why you should add the line-height property ?
If you add height to an element , where exactly does the text inside of it lie? That is, if you have a block of text that is font-size: 10px (a theoretical height:10px) inside a container that is 60px where exactly is the text going to end up? Most surely at the top of the container, because the text can only position itself where the text flows, inside a height:10px space. But you can overcome that by using a line-height value the same height as the container, this way the text will take in the vertical-align property and align itself properly.
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/
I have 4 Images, and for some reasons my brain stopped working and i cant figure out why i cant center those.
That's the Fiddle -> http://jsfiddle.net/theminijohn/bcMX5/
If i try to just <center> them i'm getting a Deprecated Html Tag Error in my Editor.
I tried a lot of things, till rewriting the Css and Html Code, but i'm brain stuck here.
Could some Gentleman help brake my blockade ? :)
Here is one way of doing it.
Add a wrapper block element around your div's and then apply the following CSS:
.wrap {
border: 1px solid blue;
overflow: auto;
text-align: center;
}
/* Center 4 Blocks */
.hd_b {
font-size: 13px;
font-weight: normal;
margin-top: 10px;
display: block;
text-decoration: none;
}
._hd {
margin-right: 20px;
display: inline-block;
text-align: center;
}
._hd:last-child {
margin-right: 0;
}
._hd img {
opacity: .85;
}
._hd a:hover img {
opacity: 1;
}
See demo at http://jsfiddle.net/audetwebdesign/QTxy9/
The parent .wrap block has text-align: center, and this will center the child ._hd div's that have display: inline-block.
You need to reset the right margin on the last child div using ._hd:last-child.
This works pretty well if you are willing to use the inline-block display type.
Note that any white space between inline-block elements translate into a 1ex wide space, which may not be obvious when you set the margin between blocks.
All of those divs need to be in one container div that has a fixed width. Then you can apply margin: 0 auto to the container.
http://jsfiddle.net/bcMX5/9/
Try doing this:-
Give a "main" DIV outside all img DIV "<div id="main">"
and give "margin: 0 auto;" along with some width to it.
Please refer the Fiddle: http://jsfiddle.net/aasthatuteja/6U2YJ/
Hope this should solve your issue!
would this be, want you want?
._hd {
margin-right: 20px;
display: block;
width:100%;
text-align: center;
}
Forget about margin and float ;) http://jsfiddle.net/bcMX5/8/
._hd {
//margin-right: 20px;
display: block;
//float: left;
text-align: center;
}
Depends on how you want to center the elements? If it's in a column the above answer would work. Its in a grid then wrap them in a fixed width container.
._hd_container{
width:440px;
margin:0 auto;
}
http://jsfiddle.net/RzfMP/
Need to vertically align images within a containing box like this:
<span class="image-box"><img src="/1_thumb.jpg"></span>
with this:
.image-box{
width: 75px;
height: 75px;
display: block;
float: left;
text-align: center;
// ????
vertical-align: text-top;
}
The vertical-align is not working correcty. How would I align this?
thx
Assign this CSS to the image vertical-align: middle; and add this line of CSS to the .image-box line-height: 75px;. The value for height and line-height should be the same.
Example: http://jsfiddle.net/SjKUa/1/
Add this and maybe change the 0 to however much space you would want between the images. This will line them up centered inside of your column which is what it seems like you are after.
.image-box img {
margin: 0 auto;
}