it-swarm.cn

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

我有一个带有两个图像的div和一个h1。所有这些都需要在div内垂直对齐,彼此相邻。

其中一个图像需要absolute位于div内。

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

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

哇,这个问题很受欢迎。它基于vertical-align属性的误解。这篇优秀的文章解释了它:

理解vertical-align,或“如何(不)垂直居中内容” / Gavin Kistner。

“如何以CSS为中心”是一个很棒的网络工具,它有助于为不同情况找到必要的CSS居中属性。


简而言之 (并防止链接腐烂)

  • 内联元素 (和内联元素)可以通过vertical-align: middle在其上下文中垂直对齐。但是,“context”不是整个父容器的高度,而是它们所在的文本行的高度. jsfiddle example
  • 对于块元素,垂直对齐更难,并且在很大程度上取决于具体情况:[。_____。]
    • 如果内部元素可以具有 固定高度 ,则可以使其位置absolute并指定其heightmargin-toptop位置。 jsfiddle示例
    • 如果居中元素 由单行组成 其父高度是固定的 您可以简单地设置容器的line-height来填充其高度。根据我的经验,这种方法非常通用。 jsfiddle示例
    • ......还有更多这样的特殊情况。
816
Konrad Rudolph

现在Flexbox支持正在增加,应用于包含元素的CSS将垂直居中包含的项:

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

如果您还需要定位Explorer 10和旧的(<4.4)Android浏览器,请使用带前缀的版本:

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

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

    align-items: center;
}
109
E. Serrano

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

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; }

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

104
user2346571

它对我有用:

.vcontainer {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
}
44
Romain
 .outer {
   display: flex;
   align-items: center; 
   justify-content: center;
 }
25

我朋友的一项技巧:

HTML:

<div style="height:100px; border:1px solid;">
    <p style="border:1px dotted;">I'm vertically centered.</p>
</div>

CSS:

div:before {content:" "; display:inline-block; height:100%; vertical-align:middle;}
div p {display:inline-block;}

_ demo _ here

21
abernier

要将块元素定位到中心(在IE9及以上版本中工作),需要一个包装器div

.vcontainer {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
16
Blacksonic

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

对齐 how ?图像的顶部与文本顶部对齐?

其中一个图像需要在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>
16
Shog9

使用这个公式,它将始终没有裂缝:

#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>
15
Anita Mandal

我的诀窍是在div中放入一个包含1行和1列的表,设置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/sbq​​jnn9q/

11
joan16v

几乎所有方法都需要指定高度,但通常我们没有任何高度。
所以这里有一个CSS3 3线技巧,不需要知道高度。

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

甚至在IE9中也支持它。

及其供应商前缀:

.element {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

资料来源: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

10
Shadowbob

我们可以使用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/

此解决方案也适用于响应divheightwidth

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

3
Dashrath

默认情况下,h1是一个块元素,将在第一个img之后的行上呈现,并将导致第二个img出现在块后面的行上。

要阻止这种情况发生,您可以将h1设置为具有内联流行为:

#header > h1 { display: inline; }

至于绝对定位img 在div 中,你需要将包含div设置为“已知大小”才能正常工作。根据我的经验,您还需要将位置属性更改为默认值 - 位置:relative对我有用:

#header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }

如果你可以让它工作,你可能想尝试从div.header逐步删除高度,宽度,位置属性,以获得所需的最小属性,以获得你想要的效果。

更新:

这是一个适用于Firefox 3的完整示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Example of vertical positioning inside a div</title>
        <style type="text/css">
            #header > h1 { display: inline; }
            #header { border: solid 1px red; 
                      position: relative; }
            #img-for-abs-positioning { position: absolute;
                                       bottom: -1em; right: 2em; }
        </style>
    </head>

    <body>
        <div id="header">
            <img src="#" alt="Image 1" width="40" height="40" />
            <h1>Header</h1>
            <img src="#" alt="Image 2" width="40" height="40" 
                 id="img-for-abs-positioning" />
        </div>
    </body>
</html>
3
Mike Tunnicliffe

使用CSS到垂直中心,您可以让外部容器像表格一样,内容作为表格单元格。在这种格式中,您的对象将保持居中。 :)

我在JSFiddle中嵌套了多个对象作为示例,但核心思想是这样的:

_ html _

<div class="circle">
  <div class="content">
    Some text
  </div>
</div>

_ css _

 .circle {
   /* act as a table so we can center vertically its child */
   display: table;
   /* set dimensions */
   height: 200px;
   width: 200px;
   /* horizontal center text */
   text-align: center;
   /* create a red circle */
   border-radius: 100%;
   background: red;
 }

 .content {
   /* act as a table cell */
   display: table-cell;
   /* and now we can vertically center! */
   vertical-align: middle;
   /* some basic markup */
   font-size: 30px;
   font-weight: bold;
   color: white;
 }

多个对象示例:

_ html _

<div class="container">
  <div class="content">

    <div class="centerhoriz">

      <div class="circle">
        <div class="content">
          Some text
        </div><!-- content -->
      </div><!-- circle -->

      <div class="square">
        <div class="content">
          <div id="smallcircle"></div>
        </div><!-- content -->
      </div><!-- square -->

    </div><!-- center-horiz -->

  </div><!-- content -->
</div><!-- container -->

_ css _

.container {
  display: table;
  height: 500px;
  width: 300px;
  text-align: center;
  background: lightblue;
}

.centerhoriz {
  display: inline-block;
}

.circle {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: red;
  border-radius: 100%;
  margin: 10px;
}

.square {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: blue;
  margin: 10px;
}

.content {
  display: table-cell;
  vertical-align: middle;
  font-size: 30px;
  font-weight: bold;
  color: white;
}

#smallcircle {
  display: inline-block;
  height: 50px;
  width: 50px;
  background: green;
  border-radius: 100%;
}

结果

Result

https://jsfiddle.net/martjemeyer/ybs032uc/1/

3
Henk-Martijn

按照今天的说法,我找到了一个新的解决方法,使用CSS3在div中垂直对齐多个文本行(我也使用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%;
}

根据我的理解,包含元素的文本的直接父级必须具有一些高度。我希望它也会对你有所帮助。谢谢!

2
Shivam

只需在div中使用一个单元格表!只需将单元格和表格高度设置为100%即可,您可以使用vertical-align。

Div内部的单格表处理垂直对齐,向后兼容回到石器时代!

1
Joel Moses

对我来说,它的工作方式如下:

<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”内垂直居中。

0
BernieSF

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

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;
}
0
danigonlinea

有两种方法可以垂直和水平对齐元素

1. Bootstrap 4.3.X

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

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

.container {
    height: 180px;
    width:100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
rel="stylesheet"/>

<div class="d-flex align-items-center justify-content-center bg-info container">
  <div class="bg-light p-2">I am in Center</div>
</div>

2. CSS3

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #17a2b8;
    height: 180px;
    width:100%;
}

.child {
  background-color: #f8f9fa;
  padding: 0.5rem;
}
<div class="container">
  <div class="child">I am in Center</div>
</div>
0
WasiF

我一直在使用以下解决方案(没有定位和没有行高),因为一年多来,它也适用于IE 7和8。

<style>
.outer {
    font-size: 0;
    width: 400px;
    height: 400px;
    background: orange;
    text-align: center;
    display: inline-block;
}

.outer .emptyDiv {
    height: 100%;
    background: orange;
    visibility: collapse;
}

.outer .inner {
    padding: 10px;
    background: red;
    font: bold 12px Arial;
}

.verticalCenter {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}
</style>

<div class="outer">
    <div class="emptyDiv verticalCenter"></div>
    <div class="inner verticalCenter">
        <p>Line 1</p>
        <p>Line 2</p>
    </div>
</div>
0
Arsh