我有一个包含文本的div元素,我想将此div的内容垂直居中对齐.
这是我的div风格:
#box {
height: 170px;
width: 270px;
background: #000;
font-size: 48px;
color: #FFF;
text-align: center;
}<div id="box">
Lorem ipsum dolor sit
</div>做这个的最好方式是什么？
我试图垂直居中我的标签内容,但是当我添加CSS样式时display:inline-flex,水平文本对齐消失.
如何为每个标签创建文本对齐x和y？
* { box-sizing: border-box; }
#leftFrame {
background-color: green;
position: absolute;
left: 0;
right: 60%;
top: 0;
bottom: 0;
}
#leftFrame #tabs {
background-color: red;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 25%;
}
#leftFrame #tabs div {
border: 2px solid black;
position: static;
float: left;
width: 50%;
height: 100%;
text-align: center;
display: inline-flex;
align-items: center;
}<div id=leftFrame>
<div id=tabs>
<div>first</div>
<div>second</div>
</div>
</div>在定义的宽度/高度中垂直居中任何内容的正确方法是什么div.
在示例中,有两个具有不同高度的内容,使用该类垂直居中的最佳方式是什么.content.(它适用于所有浏览器,没有解决方案table-cell)
有一些解决方案,但想知道其他想法,一个是使用position:absolute; top:0; bottom: 0;和margin auto.
<body>
<div style="position:absolute; height:100%; width:100%;">
<h1 style="text-align:center;">Text</h1>
</div>
</body>
无论div元素有多高,我怎样才能将div标签内的h1标签垂直居中？即如果用户更改其浏览器高度,我希望h1根据新高度在中心垂直对齐.
谢谢.