我试图将标签内容垂直居中,但是当我添加 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>
最佳答案
方法一 -
transform
translateX
/translateY
:Example Here/Full Screen Example
在 supported browsers (大部分),您可以将
top: 50%
/left: 50%
与translateX(-50%) translateY(-50%) 结合使用
动态垂直/水平居中元素。
.container {
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
<div class="container">
<span>I'm vertically/horizontally centered!</span>
</div>
方法 2 - Flexbox 方法:
Example Here/Full Screen Example
在 supported browsers , 将目标元素的
display
设置为flex
并使用align-items: center
进行垂直居中和justify-content: center
用于水平居中。只是不要忘记添加供应商前缀以获得额外的浏览器支持 (see example)。
html, body, .container {
height: 100%;
}
.container {
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: center;
}
<div class="container">
<span>I'm vertically/horizontally centered!</span>
</div>
方法3 -
table-cell
/vertical-align: middle
:Example Here/Full Screen Example
在某些情况下,您需要确保
html
/body
元素的高度设置为100%
。对于垂直对齐,将父元素的
width
/height
设置为100%
并添加display:table
.然后对于子元素,将display
更改为table-cell
并添加vertical-align: middle
。对于水平居中,您可以添加
text-align: center
以使文本和任何其他inline
子元素居中。或者,您可以使用margin: 0 auto
,假设元素是block
级别。
html, body {
height: 100%;
}
.parent {
width: 100%;
height: 100%;
display: table;
text-align: center;
}
.parent > .child {
display: table-cell;
vertical-align: middle;
}
<section class="parent">
<div class="child">I'm vertically/horizontally centered!</div>
</section>
方法 4 - 绝对定位
50%
距离顶部有位移:Example Here/Full Screen Example
此方法假定文本具有已知高度 - 在本例中为
18px
。相对于父元素,从顶部绝对定位元素50%
。使用一个负的margin-top
值,该值是元素已知高度的一半,在本例中为-9px
。
html, body, .container {
height: 100%;
}
.container {
position: relative;
text-align: center;
}
.container > p {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin-top: -9px;
}
<div class="container">
<p>I'm vertically/horizontally centered!</p>
</div>
方法 5 -
line-height
方法(最不灵活 - 不建议):在某些情况下,父元素会有一个固定的高度。对于垂直居中,您所要做的就是在子元素上设置一个
line-height
值,使其等于父元素的固定高度。虽然此解决方案在某些情况下会起作用,但值得注意的是,当存在多行文本时它不起作用 - like this .
.parent {
height: 200px;
width: 400px;
background: lightgray;
text-align: center;
}
.parent > .child {
line-height: 200px;
}
<div class="parent">
<span class="child">I'm vertically/horizontally centered!</span>
</div>
关于html - 如何使元素水平和垂直居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19461521/