元素在一个div中的垂直alignment
我有一个div与两个图像和一个h1 。 所有这些都需要在div内相互垂直alignment。
其中一个图像需要在div内absolute定位。
在所有常见的浏览器上，这个工作所需要的CSS是什么？
<div id="header"> <img src=".." ></img> <h1>testing...</h1> <img src="..."></img> </div>
哇，这个问题很受欢迎。 这是基于vertical-align属性的一个误解。 这篇优秀的文章解释说：
了解vertical-align ，或由Gavin Kistner “如何（不）垂直居中内容” 。
“如何以CSS为中心”是一个伟大的networking工具，它有助于为不同情况find必要的CSS集中属性。
简而言之（并防止链接腐烂） ：
- 内联元素 （ 仅内联元素）可以通过
vertical-align: middle在上下文中vertical-align: middle。 但是，“上下文”不是整个父容器高度，而是它们所在文本行的高度。jsfiddle示例 - 对于块元素来说，垂直alignment更困难，并且取决于具体的情况：
- 如果内部元素可以有一个固定的高度 ，您可以使其位置
absolute并指定其height，margin-top和top位置。 jsfiddle的例子 - 如果居中的元素由一条单独的线组成， 而且 其父高度是固定的 ，则可以简单地设置容器的
line-height来填充其高度。 这个方法在我的经验中是相当通用的。 jsfiddle的例子 - …还有更多这样的特例。
- 如果内部元素可以有一个固定的高度 ，您可以使其位置
我用这个非常简单的代码：
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; }
显然，不pipe你使用.class还是#id ，结果都不会改变。
现在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; }
它为我工作：
.vcontainer { min-height: 10em; display: table-cell; vertical-align: middle; }
我的一个朋友的技术：
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;}
在这里演示
所有这些都需要在div内垂直alignment
怎么样 ？ 图像的顶部与文本的顶部alignment？
其中一个图像需要在div内绝对定位。
相对于DIV绝对定位？ 也许你可以勾画出你在找什么…？
fd描述了绝对定位的步骤，以及调整H1元素的显示，使得图像与其内容一致。 为此，我会补充说，你可以使用vertical-align样式alignment图像：
#header h1 { display: inline; } #header img { vertical-align: middle; }
这将把标题和图像放在一起，顶边alignment。 其他alignment选项存在; 请参阅文档 。 您可能还会发现放置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>
要将块元素定位到中心（在IE9和更高版本中工作），需要一个包装div ：
.vcontainer { position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); }
几乎所有的方法都需要指定高度，但通常我们没有任何高度。
所以这里是一个不需要知道高度的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/
我的诀窍是放入一个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/sbqjnn9q/
默认情况下，h1是一个块元素，并且会在第一个img之后的行上呈现，并且会导致第二个img出现在该块之后的行上。
要阻止这种情况发生，可以将h1设置为具有内联stream行为：
#header > h1 { display: inline; }
至于绝对定位img 内的div ，你需要设置包含div有一个“已知的大小”，才能正常工作。 根据我的经验，您还需要将位置属性从默认位置改为 – 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来垂直居中，你可以让外层的容器像表格一样，内容像表格一样。 在这种格式中，对象将保持居中。 🙂
例如，我在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%; }
结果
只需使用div中的单元格表格！ 只需设置单元格和表格高度，并设置为100％，即可使用垂直alignment。
div中的单元格表格处理垂直alignment，并向后兼容石器时代！
我们可以使用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; }
在这里创build的演示： https : //jsfiddle.net/xnjq1t22/
这个解决scheme适用于响应的div height和width 。
注意：calc函数没有经过旧版浏览器的兼容性testing。
我一直在使用下面的解决scheme（没有定位，没有行高），因为一年多来，它也可以使用IE 7和IE 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>
这是我的个人解决scheme里面的一个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; }
对我来说，它是这样工作的：
<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类转换为button，现在它在一个外部“div”中垂直居中。
今天，我发现了一个新的解决方法，使用CSS3垂直alignmentdiv中的多个文本行（我也使用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%; }
根据我的理解，包含元素的文本的直接父母必须有一定的高度。 我希望它也能帮助你。 谢谢！
我是一个刚刚进入networking编程的.NET人。 我没有使用CSS（好，一点点）。 我使用了一点JavaScript来实现垂直居中以及jQuery的.cssfunction。
我只是从我的testing中发布一切。 这可能不是太优雅，但它的工作到目前为止。
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> <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中的单元格表格处理垂直alignment，并向后兼容石器时代！
这只是另一个（响应）方法：
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; }
<!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>
添加样式，
style="float: left; "
为div标签中的每个元素。 所以每个元素将垂直alignment…
<div id="header" style="display: table-cell; vertical-align:middle;">
…
或CSS
.someClass { display: table-cell; vertical-align:middle; }
浏览器覆盖
