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

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

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

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

当前回答

<!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

其他回答

只使用Bootstrap类:

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

2020-11-11 05:32:44

我们可以使用CSS函数计算来计算元素的大小，然后相应地定位子元素。

示例HTML:

<div class="box">
    <span><a href="#">Some Text</a></span>
</div>

和CSS:

.box {
    display: block;
    background: #60D3E8;
    position: relative;
    width: 300px;
    height: 200px;
    text-align: center;
}

.box span {
    font: bold 20px/20px 'source code pro', sans-serif;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - 10px);
}

a {
    color: white;
    text-decoration: none;
}

演示创建在这里:https://jsfiddle.net/xnjq1t22/

这个解决方案工作良好的响应div高度和宽度以及。

注意:没有测试calc函数与旧浏览器的兼容性。

2016-10-06 19:57:20

所有这些都需要在div中垂直对齐

对齐的如何?图片的顶部与文字的顶部对齐?

其中一个图像需要在div中绝对定位。

相对于DIV的绝对定位?也许你可以把你要找的东西画出来?

fd描述了绝对定位的步骤，以及调整H1元素的显示，以便图像将与它内联显示。除此之外，我还要补充一点，你可以使用vertical-align样式来对齐图像:

#header h1 { display: inline; }
#header img { vertical-align: middle; }

.．.这将把标题和图像放在一起，顶部边缘对齐。还有其他对齐选项;请参见文档。你可能还会发现删除DIV并将图像移动到H1元素内部是有益的——这为容器提供了语义值，并消除了调整H1显示的需要:

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

2008-09-17 04:34:51

我发现了一个新的解决方案，垂直对齐多个文本行在一个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

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

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中垂直对齐元素?

推荐文章

最新文章

标签