我有一个div与两个图像和一个h1。所有这些都需要在div中垂直对齐，彼此相邻。其中一个图像需要在div中绝对定位。
要在所有常见浏览器上工作，需要什么样的CSS ?
<div id="header">
<img src=".." ></img>
<h1>testing...</h1>
<img src="..."></img>
</div>
当前回答
使用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%;
}
结果
https://jsfiddle.net/martjemeyer/ybs032uc/1/
其他回答
就在这个:
<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处理垂直对齐和向后兼容回石器时代!
使用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;
}
只需在div中使用一个单格表!只需设置单元格和表格的高度和与100%，你可以使用垂直对齐。
一个单元表内的div处理垂直对齐和向后兼容回石器时代!
垂直和水平对齐元素
使用它们中的任何一个。结果是一样的:
引导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 >
对我来说，它是这样工作的:
<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”。
