CODEWITHSUNDEEP
htmlcssvertical-alignment
Yarin
Yarin

Reputation: 183469

CSS vertical alignment of inline/inline-block elements

I'm trying to get several inline and inline-block components aligned vertically in a div. How come the span in this example insists on being pushed down? I've tried both vertical-align:middle; and vertical-align:top;, but nothing changes.

HTML: 

<div>
  <a></a><a></a>
  <span>Some text</span>
</div>​

CSS: 

a {
    background-color:#FFF;
    width:20px;
    height:20px;
    display:inline-block;
    border:solid black 1px;
}

div {
    background:yellow;
    vertical-align:middle;
}
span {
    background:red;
}

​ RESULT:
enter image description here

FIDDLE

Upvotes: 180

Views: 230147

Answers (5)

somedotnetguy
somedotnetguy

Reputation: 928

I was not satisfied by the accepted answer. Its not truly centering, which I showcase/proof in my first example, so I played around and the two solutions I found is the classical top: 50% plus translateY(-50%) with absolute positioning or using flex-box.

Sidenotes:

I personally find the workings of the vertical-align somehwhat complicated and I'm uncertain if this can be used for truly centered the entire child inline-block like the flex-box can. Info can be found here. But mind these two fact:

baseline (default)

Aligns the baseline of the element with the baseline of its parent. The baseline of some replaced elements, like <textarea>, is

not specified by the HTML specification, meaning that their behavior with this keyword may vary between browsers.

middle

Aligns the middle of the element with the baseline plus half the x-height of the parent.

As you can see vertical-align: middle involves the x-height and is more text-related an thusly does not "truly" center, the entire element.

Example 1:

Maybe you need to zoom in to see the subtle difference, I made some outlines to make it more visibly. Note, that if not set, the default for vertical-align is baseline 

div {
  background: orange;
  margin: 10px;
  line-height: 40px;
  position: relative;
}

div>* {
  line-height: normal;
}

a {
  background-color: #FFF;
  height: 20px;
  display: inline-block;
  border: solid black 1px;
  padding: 5px;
  outline: 1px dotted black;
  outline-offset: 2px;
}

.va-m {
  vertical-align: middle;
}

span {
  height: 16px;
  display: inline-block;
  outline: 1px dotted black;
  outline-offset: 9px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
<div>
  Pure text
  <a>Not really centered</a>
  <a class="va-m">Not really centered</a>
  <span>Centered</span>
</div>

Example 2: Flexbox

(Here is a good guide.)

a {
  background-color: #FFF;
  width: 20px;
  height: 20px;
  display: inline-block;
  border: solid black 1px;
}

div {
  height: 40px;
  background: yellow;
  display: flex;
  align-items: center;
}

span {
  background: red;
}
<div>
  <a></a>
  <a></a>
  <span>Some text</span>
</div>

Upvotes: 1

kslstn
kslstn

Reputation: 1646

For fine tuning the position of an inline-block item, use top and left:

  position: relative;
  top: 5px;
  left: 5px;

Thanks CSS-Tricks!

Upvotes: 6

Diego
Diego

Reputation: 18349

vertical-align applies to the elements being aligned, not their parent element. To vertically align the div's children, do this instead:

div > * {
    vertical-align:middle;  // Align children to middle of line
}

See: http://jsfiddle.net/dfmx123/TFPx8/1186/

NOTE: vertical-align is relative to the current text line, not the full height of the parent div. If you wanted the parent div to be taller and still have the elements vertically centered, set the div's line-height property instead of its height. Follow jsfiddle link above for an example.

Upvotes: 333

HoldTheLine
HoldTheLine

Reputation: 122

Simply floating both elements left achieves the same result. 

div {
background:yellow;
vertical-align:middle;
margin:10px;
}

a {
background-color:#FFF;
width:20px;
height:20px;
display:inline-block;
border:solid black 1px;
float:left;
}

span {
background:red;
display:inline-block;
float:left;
}

Upvotes: 6

sandeep
sandeep

Reputation: 92803

Give vertical-align:top; in a & span. Like this:

a, span{
 vertical-align:top;
}

Check this http://jsfiddle.net/TFPx8/10/

Upvotes: 30

Related Questions