我有一个div与两个图像和一个h1。所有这些都需要在div中垂直对齐,彼此相邻。其中一个图像需要在div中绝对定位。
要在所有常见浏览器上工作,需要什么样的CSS ?
<div id="header">
<img src=".." ></img>
<h1>testing...</h1>
<img src="..."></img>
</div>
我有一个div与两个图像和一个h1。所有这些都需要在div中垂直对齐,彼此相邻。其中一个图像需要在div中绝对定位。
要在所有常见浏览器上工作,需要什么样的CSS ?
<div id="header">
<img src=".." ></img>
<h1>testing...</h1>
<img src="..."></img>
</div>
当前回答
只需在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”。
就在这个:
<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处理垂直对齐和向后兼容回石器时代!
只需在div中使用一个单格表!只需设置单元格和表格的高度和与100%,你可以使用垂直对齐。
一个单元表内的div处理垂直对齐和向后兼容回石器时代!
这是我个人的解决方案的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;
}