Vertical alignment of elements in a div

I have a div with two images and an h1 . All of them need to be vertically aligned within the div, next to each other.

One of the images needs to be absolute positioned within the div.

What is the CSS needed for this to work on all common browsers?

<div id="header">
    <img src=".." ></img>
    <h1>testing...</h1>
    <img src="..."></img>
</div>

---

Wow, this problem is popular. It's based on a misunderstanding in the vertical-align property. This excellent article explains it:

Understanding vertical-align , or "How (Not) To Vertically Center Content" by Gavin Kistner.

“How to center in CSS” is a great web tool which helps to find the necessary CSS centering attributes for different situations.

---

In a nutshell (and to prevent link rot):

Inline elements (and only inline elements) can be vertically aligned in their context via vertical-align: middle . However, the “context” isn't the whole parent container height, it's the height of the text line they're in. jsfiddle example

For block elements, vertical alignment is harder and strongly depends on the specific situation:

If the inner element can have a fixed height , you can make its position absolute and specify its height , margin-top and top position. jsfiddle example

If the centered element consists of a single line and its parent height is fixed you can simply set the container's line-height to fill its height. This method is quite versatile in my experience. jsfiddle example

… there are more such special cases.

---

I used this very simple code:

HTML:

<div class="ext-box">
    <div class="int-box">
        <h2>Some txt</h2>
        <p>bla bla bla</p>
    </div>
</div>

CSS:

div.ext-box { display: table; width:100%;}
div.int-box { display: table-cell; vertical-align: middle; }

Obviously, whether you use a .class or an #id , the result won't change.

---

Now that flexbox support is increasing, this CSS applied to the containing element would vertically center the contained item:

.container {        
    display: flex;
    align-items: center;
}

Use the prefixed version if you also need to target Explorer 10, and old (< 4.4) Android browsers:

.container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
}

链接地址: http://www.djcxy.com/p/7150.html

上一篇: 建议在JavaScript无效之前包含CSS吗？

下一篇: 元素在一个div中的垂直对齐