我有一个包含两个图片的div和一个h1
。它们都需要在div内垂直对齐,彼此相邻。
其中一张图片需要absolute
放在div中。
要在所有常见的浏览器上运行,需要什么CSS?
<div id="header">
<img src=".." ></img>
<h1>testing...</h1>
<img src="..."></img>
</div>
我有一个包含两个图片的div和一个h1
。它们都需要在div内垂直对齐,彼此相邻。
其中一张图片需要absolute
放在div中。
要在所有常见的浏览器上运行,需要什么CSS?
<div id="header">
<img src=".." ></img>
<h1>testing...</h1>
<img src="..."></img>
</div>
Answers:
哇,这个问题很流行。这是基于对vertical-align
物业的误解。这篇出色的文章对此进行了解释:
vertical-align
加文·基斯纳(Gavin Kistner )的“ 理解”或“如何(不)使内容垂直居中”。
“如何在CSS中居中”是一个很棒的网络工具,可以帮助找到不同情况下必要的CSS居中属性。
简而言之(并防止链接腐烂):
vertical-align: middle
。但是,“上下文”不是整个父容器的高度,而是它们所在的文本行的高度。jsfiddle示例absolute
,并指定其height
,margin-top
和top
位置。jsfiddle示例line-height
高度以填充其高度。根据我的经验,这种方法用途广泛。jsfiddle示例vertical-align: middle
)的问题在于您必须指定一个固定的高度。响应式Web设计不太可能。
inline-block
和table-cell
元素。如果您对此有疑问,请尝试调整line-height
容器元素(即上下文),因为它vertical-align
在行框计算中使用。
现在对flexbox的支持正在增加,应用于CSS元素的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;
}
我使用了以下非常简单的代码:
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; }
显然,无论您使用a .class
还是an #id
,结果都不会改变。
它为我工作:
.vcontainer {
min-height: 10em;
display: table-cell;
vertical-align: middle;
}
margin : 0 auto
,则由于display: table-cell
我的一个朋友的技术:
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;}
在这里演示
要将块元素定位到中心(在IE9及更高版本中有效),需要使用包装器div
:
.vcontainer {
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
所有这些都需要在div中垂直对齐
对齐方式如何?图片顶部与文字顶部对齐?
其中一张图片必须绝对位于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>
使用此公式,它将始终有效而不会出现裂缝:
#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>
几乎所有方法都需要指定高度,但是通常我们没有任何高度。
因此,这里有一个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/
用于垂直对齐: 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>
.container {
display: flex;
align-items: center; // verticall center
justify-content: center; // horizontally 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>
我的技巧是在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>
#3在父div中使中心子div的方法
转换/翻译方法
/* 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%);
}
<div class="parent1">
<div class="child1"></div>
</div>
<hr />
<div class="parent2">
<div class="child2"></div>
</div>
<hr />
<div class="parent3">
<div class="child3"></div>
</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%;
}
结果
默认情况下,h1是一个块元素,它将在第一个img之后的行上呈现,并使第二个img出现在该块之后的行上。
要阻止这种情况的发生,您可以将h1设置为具有内联流行为:
#header > h1 { display: inline; }
至于将img绝对定位在div中,您需要将包含div设置为“已知大小”,然后才能正常工作。以我的经验,您还需要将position属性更改为默认值-position: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>
我们可以使用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/
此解决方案与响应式div
height
和width
很好。
注意:未测试calc函数与旧浏览器的兼容性。
今天,我发现了一个新的解决方法,可以使用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%;
}
根据我的理解,包含元素的文本的直接父级必须具有一定的高度。希望对您有帮助。谢谢!
我最喜欢的新方法是使用CSS网格:
/* 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;
}
<div class="wrapper">
<img src="https://source.unsplash.com/random/100x80/?bear">
<img src="https://source.unsplash.com/random/100x120/?lion">
<img src="https://source.unsplash.com/random/100x80/?tiger">
</div>
自一年多以来,我一直在使用以下解决方案(无定位且无行高),它也适用于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>
这是我对div中的i元素的个人解决方案
<div class="circle">
<i class="fa fa-plus icon">
</i></div>
.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;
}
<!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_center { position:relative; top:50%; left:50%; height:50px; margin-top:-25px; }-->
</style>
</head>
<body>
<div style="height:200px; width:200px; background:#00FF00">
<div id="style_center">+</div>
</div>
</body>
</html>
这只是另一种(响应)方法:
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;
}
我是一个刚接触Web编程的.NET专家。我没有使用CSS(好一点)。我使用了一些JavaScript来完成垂直居中以及jQuery的.css函数。
我只是发布测试中的所有内容。它可能不会过分优雅,但到目前为止已经可以使用。
script.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<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')
})
</script>
<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>
<div id="div1">
<div id="buttonLeft">
<button id="testerbtn">tester</button>
</div>
<div id="buttonRight"></div>
</div>
</body>
</head>
</html>
<div id="header" style="display: table-cell; vertical-align:middle;">
...
或CSS
.someClass
{
display: table-cell;
vertical-align:middle;
}
table-cell
,可以vertical-align: middle;
正常工作。更好的是,它不需要嵌套的包装器/缓冲区div就可以工作,并且它同时适用于文本和图像(或两者),并且您不需要更改position属性。