How to vertically center a <span> inside a div?

html css center
Babiker picture Babiker · Dec 5, 2010 · Viewed 358.3k times · Source

The code:

<div 
  id="theMainDiv"
  style="
    border:solid 1px gray;
    cursor:text;
    width:400px;
    padding:0px;"
>
  <span 
    id="tag1_outer" 
    style="
      background:#e2e6f0;
      padding-right:4px;
      padding-left:4px;
      border:solid 1px #9daccc;
      font:normal 11px arial;
      color:#3c3c3c"
  >as</span>
</div>

As it renders now, the span is align the bottom-left corner of the div.

Answer

Phrogz picture Phrogz · Dec 5, 2010

See my article on understanding vertical alignment. There are multiple techniques to accomplish what you want at the end of the discussion.

(Super-short summary: either set the line-height of the child equal to the height of the container, or set positioning on the container and absolutely position the child at top:50% with margin-top:-YYYpx, YYY being half the known height of the child.)

Related questions

How to align a <div> to the middle (horizontally/width) of the page

I have a div tag with width set to 800 pixels. When the browser width is greater than 800 pixels, it shouldn't stretch the div, but it should bring it to the middle of the page.

Read More
How to position a div in the middle of the screen when the page is bigger than the screen

Hi I'm using something similiar to the following to get a div positioned in the middle of the screen: <style type="text/css"> #mydiv { position:absolute; top: 50%; left: 50%; width:30em; height:18em; margin-top: -9em; /*set to a …

Read More
Center form submit buttons HTML / CSS

I'm having troubles centering my HTML form submit buttons in CSS. Right now I'm using: <input value="Search" title="Search" type="submit" id="btn_s"> <input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="…

Read More