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


当前回答

.align { display: flex; width: 400px; height: 400px; border: solid 1px black; align-items: center; justify-content: space-around; } .align div:first-child { width: 20px; height: 20px; background-color: red; position: absolute; } .align div { width: 20px; height: 20px; background-color: blue; } <div class='align'> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>

第一个子将在中心垂直和水平对齐

其他回答

将一个盒子垂直和水平居中的最好方法是使用两个容器:

外面的容器:

应有显示:表;

内容器:

应该有display: table-cell; 应该有垂直对齐:中间; 应该有text-align: center;

内容框:

应该有显示:inline-block; 应该调整水平文本对齐,除非你想让文本居中

演示:

body { margin : 0; } .outer-container { display: table; width: 80%; height: 120px; background: #ccc; } .inner-container { display: table-cell; vertical-align: middle; text-align: center; } .centered-content { display: inline-block; text-align: left; background: #fff; padding : 20px; border : 1px solid #000; } <div class="outer-container"> <div class="inner-container"> <div class="centered-content"> Center this! </div> </div> </div>

看看这小提琴!

居中的:在书页中间居中的:

要将内容置于页面中央,请将以下内容添加到外部容器中:

位置:绝对; 宽度:100%; 高度:100%;

下面是一个演示:

body { margin : 0; } .outer-container { position : absolute; display: table; width: 100%; height: 100%; background: #ccc; } .inner-container { display: table-cell; vertical-align: middle; text-align: center; } .centered-content { display: inline-block; text-align: left; background: #fff; padding : 20px; border : 1px solid #000; } <div class="outer-container"> <div class="inner-container"> <div class="centered-content"> Center this! </div> </div> </div>

看看这小提琴!

对我来说,最简单和最干净的解决方案是使用CSS3属性“transform”:

.container { 位置:相对; } .container a { 位置:绝对的; 上图:50%; 变换:翻译(0 -50%); } < div class = "容器" > <a href="#">Hello world!< / > < / div >

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

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

不需要父样式。

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

下面是获得理想结果的Flex-box方法

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Flex-box approach</title> <style> .tabs{ display: -webkit-flex; display: flex; width: 500px; height: 250px; background-color: grey; margin: 0 auto; } .f{ width: 200px; height: 200px; margin: 20px; background-color: yellow; margin: 0 auto; display: inline; /*for vertically aligning */ top: 9%; /*for vertically aligning */ position: relative; /*for vertically aligning */ } </style> </head> <body> <div class="tabs"> <div class="f">first</div> <div class="f">second</div> </div> </body> </html>

如果CSS3是一个选项(或者你有一个备用方案),你可以使用transform:

.center {
    right: 50%;
    bottom: 50%;
    transform: translate(50%,50%);
    position: absolute;
}

与上面的第一种方法不同,你不想使用left:50%和负平移,因为在IE9+中有一个溢出的bug。如果使用正的右值,就不会看到水平滚动条。