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

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

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

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

当前回答

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

...

或CSS

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

浏览器覆盖

2008-09-17 03:01:23

其他回答

使用这个公式，它将永远没有裂缝:

#outer {height: 400px; overflow: hidden; position: relative;} #outer[id] {display: table; position: static;} #middle {position: absolute; top: 50%;} /* For explorer only*/ #middle[id] {display: table-cell; vertical-align: middle; width: 100%;} #inner {position: relative; top: -50%} /* For explorer only */ /* Optional: #inner[id] {position: static;} */ <div id="outer"> <div id="middle"> <div id="inner"> any text any height any content, for example generated from DB everything is vertically centered </div> </div> </div>

2012-04-01 18:58:07

就在这个:

<div>
    <table style="width: 100%; height: 100%">
        <tr>
            <td style="width: 100%; height: 100%; vertical-align: middle;">
               What ever you want vertically-aligned
            </td>
        </tr>
    </table>
</div>

一个单元表内的div处理垂直对齐和向后兼容回石器时代!

2013-10-02 07:03:37

垂直和水平对齐元素

使用它们中的任何一个。结果是一样的:

引导4 CSS3

1. 引导4.3 +

垂直对齐:d-flex align-items-center

水平对齐:d-flex justify-content-center

垂直和水平对齐:d-flex align-items-center justify-content-center

.container { 身高:180 px; 宽度:100%; background - color: blueviolet; ｝ .container > div { 背景颜色:白色; 填充:1快速眼动; ｝ <链接的href = " https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css " rel = "样式表" / > <div class="d-flex align-items-center - align- content-center container"> <div>我在中心</div> < / div >

2. CSS 3

.container { 身高:180 px; 宽度:100%; background - color: blueviolet; ｝ .container > div { 背景颜色:白色; 填充:1快速眼动; ｝ .center { 显示:flex; 对齐项目:中心; justify-content:中心; ｝ <div class="集装箱中心"> <div>我在中心</div> < / div >

2018-01-30 13:49:18

这是我个人的解决方案的i元素在一个div。

JSFiddle例子

HTML

<div class="circle">
    <i class="fa fa-plus icon">
</i></div>

CSS

.circle {
   border-radius: 50%;
   color: blue;
   background-color: red;
   height:100px;
   width:100px;
   text-align: center;
   line-height: 100px;
}

.icon {
  font-size: 50px;
  vertical-align: middle;
}

2014-09-16 11:39:46

只需在div中使用一个单格表!只需设置单元格和表格的高度和与100%，你可以使用垂直对齐。

一个单元表内的div处理垂直对齐和向后兼容回石器时代!

2013-10-02 07:17:38

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

推荐文章

最新文章

标签