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

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

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

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

当前回答

使用display flex，首先你需要包装你想对齐的项目的容器:

<div class="outdiv">
    <div class="indiv">
        <span>test1</span>
        <span>test2</span>
    </div>
</div>

然后在我的例子中应用下面的CSS内容来包装div或outdiv:

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

2019-03-08 15:43:52

其他回答

我的技巧是在div里面放一个表，一行一列，设置100%的宽度和高度，属性vertical-align:middle:

<div>

    <table style="width:100%; height:100%;">
        <tr>
            <td style="vertical-align:middle;">
                BUTTON TEXT
            </td>
        </tr>
    </table>

</div>

小提琴: http://jsfiddle.net/joan16v/sbqjnn9q/

2014-10-14 15:26:29

我最喜欢的新方法是用CSS网格:

/* technique */ .wrapper { display: inline-grid; grid-auto-flow: column; align-items: center; justify-content: center; } /* visual emphasis */ .wrapper { border: 1px solid red; height: 180px; width: 400px; } img { width: 100px; height: 80px; background: #fafafa; } img:nth-child(2) { height: 120px; } <div class="wrapper"> <img src="https://source.unsplash.com/random/100x80/?bear"> <img src="https://source.unsplash.com/random/100x120/?lion"> <img src="https://source.unsplash.com/random/100x80/?tiger"> </div>

2019-07-19 17:32:12

使用display flex，首先你需要包装你想对齐的项目的容器:

<div class="outdiv">
    <div class="indiv">
        <span>test1</span>
        <span>test2</span>
    </div>
</div>

然后在我的例子中应用下面的CSS内容来包装div或outdiv:

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

2019-03-08 15:43:52

只使用Bootstrap类:

Div: class="容器d-flex" div中的元素:class="m-auto"

2020-11-11 05:32:44

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

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

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

推荐文章

最新文章

标签