我试图将我的标签内容垂直居中,但当我添加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>
.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>
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>
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>
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>
.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>
<div style="border:2px solid #8AC007; height:200px; width:200px;">
<table style="width:100%; height:100%">
<tr style="height:100%">
<td style="height:100%; text-align:center">hello, multiple lines here, this is super long, and that is awesome, dude</td>
</tr>
</table>
</div>
为了使元素垂直和水平居中,我们也可以使用下面提到的属性。
这个CSS属性aligns-items垂直,并且接受以下值。
flex-start: 项目对齐到容器的顶部。
flex-end:项目对齐到容器的顶部。 项目对齐到容器的底部。
center: 物品在容器的垂直中心对齐。 物品在容器的垂直中心对齐。
Baseline:项目在容器的基线处显示。 项目显示在容器的基线处。
拉伸:将项目拉伸以适应容器的基线。 项目被拉伸以适应容器。
该 CSS 属性 justify-content ,它将项目水平对齐,并接受以下值。
flex-start:项被拉伸以适应容器。 项目会对齐到容器的左侧。
flex-end:项目向容器的左侧对齐。 项目向容器的右侧对齐。
center: 物品在容器的中心对齐。 物品在容器的中心对齐。
space-between: 项目之间以相等的间距显示。
space-around:以相等的间距显示项目。 以相等的间距显示项目。
将Div在页面中居中[检查fiddle链接][1]</kbd>。
[1]:
<!--开始片段。 js hide.false --> -- begin snippet: js hide: false -->
border-radius: 15px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
padding: 25px;
width: 200px;
height: 200px;
background: white;
text-align: center;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
<!--结束片段-->
更新 另一种选择是使用flex box [查看提琴链接][2]</kbd>。
[2]:
<!--开始片段。 js hide.false --> -- begin snippet: js hide: false -->
<div class="vh">
<div>Div to be aligned vertically</div>
</div>
<!--语言。 lang-css --> .vh { background-color:
高度:200px; 高度 200px; align-items: 居中。 显示。 flex; } .vh > div { 宽度: 100%; text-align: 居中。 vertical-align: 中间。 } <!--结束片段-->
网格css方法
<!--开始片段。 js hide: false console: true babel.false --> -- begin snippet: js hide: false console: true false -->
#wrapper {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
}
.main {
background-color: #444;
}
<div id="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box main"></div>
</div>
<!--结束片段-->
只要把上、下、左、右改为0即可。
<html>
<head>
<style>
<div>
{
position: absolute;
margin: auto;
background-color: lightblue;
width: 100px;
height :100px;
padding: 25px;
top :0;
right :0;
bottom:0;
left:0;
}
</style>
</head>
<body>
<div> I am in the middle</div>
</body>
</html>
<!--开始片段。 js hide.false --> -- begin snippet: js hide: false -->
/*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(你的元素display:inline-grid
+grid-auto-flow: Grid和Flex Box(父元素
display:flex;`)。
请看下面的片段
<!--开始片段。 js hide: false console: true babel.false --> -- begin snippet: js hide: false console: true false -->
#leftFrame {
display: flex;
height: 100vh;
width: 100%;
}
#tabs {
display: inline-grid;
grid-auto-flow: row;
grid-gap: 24px;
justify-items: center;
margin: auto;
}
html,body {
margin:0;
padding:0;
}
<div>
<div id=leftFrame>
<div id=tabs>
<div>first</div>
<div>second</div>
</div>
</div>
</div>
<!--结束片段-->
最简单的将div垂直和水平居中的方法如下。
-- begin snippet: js hide: false console: truefalse -->
<div style="display: table; width: 200px; height: 200px; border: 1px solid black;">
<div style="display: table-cell; vertical-align: middle; text-align: center;">
Text Here
</div>
</div>
<!--结束片段-->
再举一个例子。
.parent {
display: table;
width: 100%;
height: 100%;
}
.child {
display: table-cell;
vertical-align: middle;
text-align: center;
}
<div class="parent">
<div class="child">
<h4><u>SERVICE IN BANGLADESH FLEET RESERVE <br> AND <br> RE-ENGAGEMENT ORDER FOR DEFENCE SERVICE</u></h4>
</div>
</div>
来源[链接][1]
方法1)显示类型flex
.child-元素{ display: flex; display: flex; > justify-content: 居中。 &gt; justify-content: center; > align-items: 居中。 }
方法2)二维变换
.child-element { 上:50%。 左:50%。
变换。 translate(-50% , -50%);
左: 50%; > transform: translate(-50% , -50%;; > 位置。 绝对的。 }
见其他方法[此处][1]
简单! 在容器上使用display flex,在文本上使用margin auto!!!
#hood{
width : 300px;
height: 100px;
border: solid 1px #333333;
display: flex;
}
#hood span{
margin: auto
}
<html>
<head></head>
<body>
<div id="hood">
<span> I Am Centered</span>
</div>
</body>
</html>
演示。
测试 : Safari, Chrome, Firefox 和 Opera on MacOs Mojave . ( 所有最后一次更新在2019年2月25日 )
这应该是工作
<!--开始片段。 js hide: false console.true babel: true true babel.false --> -- begin snippet: js hide: false console: true false -->
.center-div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
}
<div class="center-div">Center Div</div>
<!--结束片段-->