关于html：如何垂直对齐div中的元素？

How to Vertical align elements in a div?

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

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

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

1
2
3

<img src=".."></img>
testing...
<img src="..."></img>

相关讨论

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

理解Gavin Kistner的vertical-align或"如何(不)垂直居中"。

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

简而言之_{(并防止链接腐烂)：}

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

相关讨论

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

1
2
3
4

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

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

1
2
3
4
5
6
7
8
9
10
11

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

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

align-items: center;
}

相关讨论

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

HTML：

1
2
3
4

Some txt
<p>
bla bla bla
</p>

CSS：

1 2	div.ext-box { display: table; width:100%;} div.int-box { display: table-cell; vertical-align: middle; }

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

相关讨论

它对我有用：

1
2
3
4
5

.vcontainer {
min-height: 10em;
display: table-cell;
vertical-align: middle;
}

相关讨论

1
2
3
4
5

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

相关讨论

我朋友的一项技巧：

HTML：

1 2	<p style="border:1px dotted;">I'm vertically centered. </p>

CSS：

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

DEMO在这里

相关讨论

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

1
2
3
4
5
6

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

相关讨论

All of them need to be vertically aligned within the div

对齐怎么样？图像的顶部与文本顶部对齐？

One of the images needs to be absolute positioned within the div.

相对于DIV绝对定位？也许你可以勾勒出你正在寻找的东西......？

fd描述了绝对定位的步骤，以及调整H1元素的显示，使得图像与其内联。为此，我将添加您可以使用vertical-align样式对齐图像：

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

...这会将标题和图像放在一起，顶边对齐。存在其他对齐选项;看文档。您可能还发现删除DIV并将图像移动到H1元素内是有益的 - 这为容器提供了语义值，并且无需调整H1的显示：

1
2
3
4

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

使用这个公式，它将始终没有裂缝：

1
2
3
4
5
6
7
8

#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;} */

1
2
3
4

any text
any height
any content, for example generated from DB
everything is vertically centered

相关讨论

我的诀窍是在div中放入一个包含1行和1列的表，设置100％的宽度和高度，以及属性vertical-align：middle。

1
2
3
4
5
6
7

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

小提琴：
http://jsfiddle.net/joan16v/sbq??jnn9q/

相关讨论

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

1
2
3
4
5

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

甚至在IE9中也支持它。

及其供应商前缀：

1
2
3
4
5
6
7

.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/

相关讨论

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

Bootstrap 4

CSS3

enter image description here

1. Bootstrap 4.3.X

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

对于水平对齐：d-flex justify-content-center

1
2
3
4

.container {
height: 180px;
width:100%;
}

1
2
3
4
5

2. CSS3

1
2
3
4
5
6
7
8
9
10
11
12
13

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

.child {
background-color: #f8f9fa;
padding: 0.5rem;
}

1	I am in Center

相关讨论

按照今天的说法，我找到了一个新的解决方法，使用CSS3在div中垂直对齐多个文本行(我也使用bootstrap v3网格系统来美化UI)，如下所示：

1
2
3
4
5
6
7
8
9
10

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

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

相关讨论

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

示例HTML：

1	<span>Some Text</span>

和CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.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 height和width。

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

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

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

1	#header > h1 { display: inline; }

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

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

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

更新：

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
Example of vertical positioning inside a div
<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>

<img src="#" alt="Image 1" width="40" height="40" />
Header
<img src="#" alt="Image 2" width="40" height="40"
id="img-for-abs-positioning" />

</body>
</html>

相关讨论

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

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

HTML

Some text

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

.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

1
2
3
4
5
6
7
8
9
10
11
12
13
14

Some text

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

.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/

我最喜欢的方法是使用CSS网格：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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

1
2
3

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

div内部的单格表处理垂直对齐，向后兼容回到石器时代！

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

JSFiddle示例

HTML

1	<i class="fa fa-plus icon">

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

＃3在父div中制作中心子div的方法

绝对定位方法
Flexbox方法
变换/翻译方法

演示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

/* 1st way */
.parent1 {
background: darkcyan;
width: 200px;
height: 200px;
position: relative;
}
.child1 {
background: white;
height: 30px;
width: 30px;
position: absolute;
top: 50%;
left: 50%;
margin: -15px;
}

/* 2nd way */
.parent2 {
display: flex;
justify-content: center;
align-items: center;
background: darkcyan;
height: 200px;
width: 200px;
}
.child2 {
background: white;
height: 30px;
width: 30px;
}

/* 3rd way */
.parent3 {
position: relative;
height: 200px;
width: 200px;
background: darkcyan;
}
.child3 {
background: white;
height: 30px;
width: 30px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

1
2
3
4
5
6

对我来说，它的工作方式如下：

"a"元素使用Bootstrap类转换为按钮，现在它在外部"div"内垂直居中。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

using display flex, first you need to wrap the container of the item
that you want to align.

1 2	<span>test1</span> <span>test2</span>

then apply the following css to wrapper div or outdiv in my example

1
2
3
4
5

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

相关讨论

只是这个：

1
2
3
4
5
6
7

<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内部的单格表处理垂直对齐，向后兼容回到石器时代！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

<body>

+

</body>
</html>

这是另一种(响应)方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

html,
body {
height: 100%;
}
body {
margin: 0;
}

.table {
display: table;
width: auto;
table-layout:auto;
height: 100%;
}
.table:nth-child(even) {
background: #a9edc3;
}
.table:nth-child(odd) {
background: #eda9ce;
}

.tr {
display: table-row;
}
.td {
display: table-cell;
width: 50%;
vertical-align: middle;
}

http://jsfiddle.net/herrfischerhamburg/JcVxz/

我是一个刚刚进入网络编程的.NET人。我没有使用CSS(嗯，一点点)。我使用了一些JavaScript来实现垂直居中以及jQuery的.css功能。

我只是发布测试中的所有内容。它可能不是太优雅，但它到目前为止工作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

script.

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js">

<script type="application/javascript">
function centerElementVertically(id) {
var btnDivHeight = $(id).outerHeight();
var prnt = $(id).parent();
var parentHeight = prnt.outerHeight();

var newTop = ((parentHeight - btnDivHeight) / 2) + 'px';
var newPct = newTop / parentHeight+'%;';

$(id).css({top: newTop});
}

function showAlert(){
alert("alert");
}

$(window).load(()=>{
centerElementVertically('#buttonRight');
centerElementVertically('#buttonLeft');
centerElementVertically('#testerbtn')
});

$(window).resize(()=>{
centerElementVertically('#buttonRight');
centerElementVertically('#buttonLeft');
centerElementVertically('#testerbtn')
})

<style>
#div1 {
position:relative;
height: 33%;
background-color: red;
overflow: hidden;
}
#buttonLeft {
position: relative;
float:left;
width:50%;
height:20%;
background-color: cornsilk;
}
#buttonRight {
position: relative;
float:right;
width:50%;
height:50%;
background-color: darkorchid;
}
#testerbtn {
position: absolute;
}
body {
background-color: aqua;
}
</style>

<body>

<button id="testerbtn">tester</button>

</body>
</head>
</html>

相关讨论

...

或CSS

1
2
3
4
5

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

浏览器覆盖范围

相关讨论