我试图垂直居中我的标签内容,但当我添加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>


当前回答

方法6

/*Change units to "%", "px" or whatever*/ #wrapper{ width: 50%; height: 70vh; background: rgba(0,0,0,.5); position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } #left{ width: 50%; height: 50vh; position: absolute; top: 0; bottom: 0; left: 0; margin: auto; background: red; } #right{ width: 50%; height: 50vh; position: absolute; top: 0; bottom: 0; right: 0; margin: auto; background: green; } .txt{ text-align: center; line-height: 50vh; } <div id="wrapper"> <div id="left" class="txt">Left</div> <div id="right" class="txt">Right</div> </div>

    .container{ 
               width: 50%;  //Your container width here
               height: 50%; //Your container height here
               position: absolute; 
               top: 0; 
               right: 0;  
               bottom: 0; 
               left: 0; 
               margin: auto;
    }

其他回答

为了使元素垂直和水平居中,我们还可以使用下面提到的属性。

这个CSS属性垂直对齐项目,并接受以下值:

flex-start:项目对齐到容器的顶部。

flex-end:物品与容器底部对齐。

center:物品在容器的垂直中心对齐。

baseline:项目显示在容器的基线。

拉伸:物品被拉伸以适应容器。

这个CSS属性justify-content,用于水平对齐项目,并接受以下值:

flex-start:项目对齐到容器的左侧。

flex-end:物品对齐到容器的右侧。

center:项目在容器的中心对齐。

space-between:项目之间以相等的间距显示。

space-around:物品以等距显示。

在这种情况下,我试图在button::before和button::after中垂直对齐文本内容,我能够使用vertical-align: text-top让它工作。

button::after {
  vertical-align: text-top;
}

要在页面中居中Div,请检查fiddle链接

# vh { border - radius: 15 px; Box-shadow: 0 0 8px rgba(0,0,0,0.4); 填充:25 px; 宽度:200 px; 身高:200 px; 背景:白色; text-align:中心; 保证金:汽车; 位置:绝对的; 上图:0; 左:0; 底部:0; 右:0; } <div id="vh"> div要垂直对齐</div>

更新 另一种选择是使用flex box检查小提琴链接

.vh { background - color: # ddd; 身高:200 px; 对齐项目:中心; 显示:flex; } .vh > div { 宽度:100%; text-align:中心; vertical-align:中间; } < div class = " vh”> <div> div要垂直对齐 < / div >

你可以使用CSS(你的元素显示:inline-grid + grid-auto-flow: row;)网格和Flex Box(父元素显示:Flex;),

参见下面的片段

# leftFrame { 显示:flex; 身高:100 vh; 宽度:100%; } 标签# { 显示:inline-grid; grid-auto-flow:行; grid-gap: 24 px; justify-items:中心; 保证金:汽车; } html,身体{ 保证金:0; 填充:0; } < div > < div id = leftFrame > < div id = >标签 首先< div > < / div > < div >第二< / div > < / div > < / div > < / div >

如果它只是关于文本对齐,它很简单。就用这个吧:

vertical-align: middle; /* vertical centering*/
text-align: center; /* horizontal centering*/

不需要父样式。

在某些情况下,当父类有一些样式属性时,它可能会影响子类,这将无法正常工作。