I want to vertical centralize the "red" square with text. I have some inner <a> inside the div, doens't know if this affect something... The css below works, but seems to have too much vertical-align: middle; in every single tag. Someone know how to make this more simple with the same html tree? Thanks!
Html:
<div>
</div>
<span>Testing...</span>
Css:
div{
display: inline-block;
margin: 0 3px;
vertical-align: middle;
}
a{
width: 5px;
height: 5px;
background-color: red;
display: block;
vertical-align: middle;
}
span{
font-size: 26px;
vertical-align: middle;
}
http://jsfiddle.net/sGgZb/6/
Only the span needs the vertical-align rule.
span{
font-size: 26px;
vertical-align: middle;
}
jsFiddle example
Use pseudo-elements since this is a purely stylistic enhancement. No additional markup is required, and your CSS is cleaner.
HTML:
<span>Testing...</span>
CSS:
span {
font-size: 26px;
padding: 0 0 0 10px;
}
span::before {
content: " ";
width: 5px;
height: 5px;
display: inline-block;
background: #f00;
vertical-align: middle;
}
jsFiddle example
If all you're trying to accomplish is to not use as many vertical aligns, then I accomplished the same effect without the container div and putting inline-block on the a itself.
http://jsfiddle.net/sGgZb/19/
Related
Why isn't my text-align: center; working? The text and the span are supposed to be in the center of the image, (I'm kind of new at this, please understand).
HTML looks like this:
<div id="image">
<div id="imageContainer">
<span><h1>Responsive Web</h1></span>
</div>
</div>
CSS looks like this:
#imageContainer h1 {
text-align: center;
font-size: 60px;
color: white;
letter-spacing: 0.05em;
}
#imageContainer span {
display: inline-block;
padding: 0.5em 0.2em;
border: white solid 10px;
}
I don't understand why it isn't working, my H1 tag isn't listening to my text-align: center; and neither is my span. This might be a newbie question, (lol) but this confuses me a lot, help please!
Remove the display property
#imageContainer span {
padding: 0.5em 0.2em;
border: white solid 10px;
}
Or put the width: 100% on
#imageContainer span {
width: 100%;
}
When you assign display: inline-block; to your span, the span is only as width as its content. You will have to set its width to 100% to get it working, or remove the display: inline-block;.
try:
#imageContainer{ text-align: center; }
and the rest (span and h1)
display: inline-block; or display: inline;
I have the following simple code snippet. It is taken out from my application where .a1 is a container button, which has an icon. The icon should be vertically middle aligned to the parents line-height/height, but it is shifted with 1px from top. Could you explain me why this is the behavior? Is there any solution?
.a1 {
display: inline-block;
width: 28px;
line-height: 28px;
background-color: #000;
text-align: center;
vertical-align: middle;
}
.i {
display: inline-block;
width: 16px;
height: 16px;
background-color: #f00;
vertical-align: middle;
}
<div class="a1"><i class="i"></i>
</div>
Why?
Because inline-block elements render with "white-space". You can see this in this demo where no height/width is set on the parent element.
When you use vertical-align:middle; the "white space" is rendered before the element (on top) (black line in the demo). This space moves the child element down and therefore it doesn't appear verticaly centered.
how to fix :
You can use display:block; and calculate the margin to apply to the child element so it centers verticaly and horzontaly.
You can also take a look at this question which talks about white space and ways to avoid them.
Well, it seems like font-size:0; for .a1 seems also a fix for such issue.
.a1 {
display: inline-block;
width: 28px;
line-height: 28px;
background-color: #000;
text-align: center;
vertical-align: middle;
font-size: 0;
}
.i {
display: inline-block;
width: 16px;
height: 16px;
background-color: #f00;
vertical-align: middle;
}
<div class="a1"><i class="i"></i>
</div>
.a1 {
display: inline-block;
background-color: #000;
}
.i {
display: block;
width: 16px;
height: 16px;
margin: 6px 6px;
background-color: #f00;
}
<div class="a1"><i class="i"></i>
</div>
.a1 {
display: inline-block;
background-color: #000;
}
.i {
display: block;
width: 16px;
height: 16px;
margin: 6px 6px;
background-color: #f00
This is driving me crazy I just don't understand why this piece of simple css to vertically center an element in a div doesn't work as expected.
this is the html:
<div class="header-a-wrapper" style="
line-height: 48px;
height: 48px;
background: red;
display: block;
text-align: center;
">
<a href="/user/5659186348163072" class="right" style="
background: blue;
line-height: normal;
display: inline-block;
vertical-align: middle;
float: none;
height: 20px;
">medical salamander</a>
</div>
the inner element does not get centered vertically but I really think it should
here is an html with the two elements:
http://alephz.com/test.html
and this is the CRAZY part. here is a jsfiddle with the same html and over there it works! tested on the same chrome/win7!
http://jsfiddle.net/pkrsdqkb/
Very weird, but if you want to solve it, you add to 'a':
position: relative;
top: 50%;
transform: translateY(-50%);
Remove
vertical-align: middle;
float: none;
One option to play nicely with vertical-align: middle is to use display: table and display: table-cell.
The wrapper gets display: table and width: 100%
Wrap the links in a div which will act as a "table cell" with display: table-cell
vertical-align: middle will now work as you expect it to.
Compatibility: display: table is good for IE 8 + and modern browsers everywhere.
Example:
.header-a-wrapper {
background: red;
display: table;
text-align: center;
height: 100px;
width: 100%;
}
.vertical {
display: table-cell;
vertical-align: middle;
}
.right {
background: blue;
display: block;
margin: 2px 0;
}
<div class="header-a-wrapper">
<div class="vertical">
medical salamander
medical salamander
</div>
</div>
Old answer
There is a lot of redundant CSS.
The vertical center is applied through: line-height: 48px.
Leave that on the wrapper and remove all the positioning CSS properties on a.right.
Example:
.header-a-wrapper {
line-height: 48px;
background: red;
display: block;
text-align: center;
}
.right {
background: blue;
}
<div class="header-a-wrapper">
medical salamander
</div>
html
<div class="main">
<h1>Test</h1>
<span class="details">Jan 21, 2014</span>
</div>
css
.main{
background-color: #666666;
border: 1px solid red;
}
h1{
background-color: #383838;
display: inline-block;
margin: 0;
padding: 0;
}
.main span{
display: inline-block;
vertical-align: middle;
}
jsFiddle
This seems to be really a simple problem, but I'm not able to fix it or I'm being too lazy. Just would like to vertical-align: middle and align it to the right of the div, if I use float: right the element attaches to the bottom of the border above. Don't want to use line-height as well.
If you want a solution that doesn't include line-height, and float, also you want to align the span to the right ....
Then use display: table; for the parent element having nested child elements set to display: table-cell;
Demo
.main{
background-color: #666666;
border: 1px solid red;
display: table;
width: 100%;
}
h1{
background-color: #383838;
display: table-cell;
margin: 0;
padding: 0;
width: 20%;
}
.main span{
display: table-cell;
vertical-align: middle;
text-align: right;
}
You want to add vertical-align: middle; to your h1
Fiddle
I need to vertically align in middle labels of menu. Allso if client will change the value of label and it will break in two lines, it'll stays in middle. As i know vertical-align: middle works for table cells, but I need to generate menu from <li> elements. See example code below.
html
<ul>
<li>qwe</li>
<li>asd</li>
<li>zxcvbnm asdfgh</li>
</ul>
css
ul {
list-style: none;
}
li {
float:left;
border: 1px solid;
margin: 1px;
height: 60px;
width: 60px;
background: tomato;
text-align: center;
vertical-align: middle;
}
a {
vertical-align: middle;
}
And working prototype at jsbin
Hi now give to li display:table-cell and remove float:left
as like this
li {
display:table-cell;
vertical-align: middle;
float:left; // remove this line
}
Demo
Just add line-height:60px to your a tag and it works.
See Demo
Use display: inline-block for <a> elements.
ul {
list-style: none;
}
li {
float:left;
border: 1px solid;
margin: 1px;
height: 60px;
line-height: 60px;
width: 60px;
background: tomato;
text-align: center;
vertical-align: middle;
}
a {
vertical-align: middle;
display: inline-block;
line-height: normal;
}
Example fiddle : http://jsbin.com/ohazot/1/edit