如何在div中垂直对齐元素?

我有一个div与两个图像和一个h1。所有这些都需要在div中垂直对齐，彼此相邻。其中一个图像需要在div中绝对定位。

要在所有常见浏览器上工作，需要什么样的CSS ?

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

当前回答

对我来说，它是这样工作的:

<div style="width:70px; height:68px; float:right; display: table-cell; line-height: 68px">
    <a href="javascript:void(0)" style="margin-left: 4px; line-height: 2" class="btn btn-primary">Login</a>
</div>

“a”元素转换为按钮，使用Bootstrap类，它现在垂直居中在一个外部的“div”。

2015-07-07 21:13:38

其他回答

我使用了这段非常简单的代码:

Div.ext-box{显示:表;宽度:100%;} Div.int-box{显示:表单元;vertical-align:中间;｝ < div class = " ext-box”> < div class = " int-box”> 一些txt < h2 > < / h2 > <p>bla bla bla</p> < / div > < / div >

显然，无论您使用.class还是#id，结果都不会改变。

2013-05-03 11:11:34

 .outer {
   display: flex;
   align-items: center; 
   justify-content: center;
 }

2018-08-01 06:38:35

<div id="header" style="display: table-cell; vertical-align:middle;">

...

或CSS

.someClass
{
   display: table-cell;
   vertical-align:middle;
}

浏览器覆盖

2008-09-17 03:01:23

我发现了一个新的解决方案，垂直对齐多个文本行在一个div使用CSS 3(我也使用bootstrap v3网格系统来美化UI)，如下所示:

.immediate-parent-of-text-containing-div {
    height: 50px;         /* Or any fixed height that suits you. */
}

.text-containing-div {
    display: inline-grid;
    align-items: center;
    text-align: center;
    height: 100%;
}

根据我的理解，包含元素的文本的直接父元素必须有一定的高度。

2017-08-02 10:35:32

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <style type="text/css">
            #style_center { position:relative; top:50%; left:50%; }
            #style_center_absolute { position:absolute; top:50px; left:50px; }
            <!--#style_center { position:relative; top:50%; left:50%; height:50px; margin-top:-25px; }-->
        </style>
    </head>

    <body>
        <div style="height:200px; width:200px; background:#00FF00">
            <div id="style_center">+</div>
        </div>
    </body>
</html>

2014-01-04 11:41:46

如何在div中垂直对齐元素?

推荐文章

最新文章

标签