我试图将我的选项卡内容垂直居中,但是当我添加 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>
最佳答案
方法 1 -
转换
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 )。请记住,父容器也需要高度(在本例中为 100%)。
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/28289493/