如何水平和垂直地居中元素? [英] How to center an element horizontally and vertically?
问题描述
我尝试将标签内容垂直居中,但当我添加css样式 display:inline-flex
时,横向文字对齐消失。
I am trying to center my tabs content vertically but when I add the css style display:inline-flex
, horizontal text-align disappears.
如何对每个标签都进行文本对齐x和y?
How can I make both text alignments x and y for each of my tabs?
* { 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 -
transform
translateX
/translateY
:
Approach 1 -
transform
translateX
/translateY
:Example Here / Full Screen Example
在支持的浏览器(大部分)中,您可以使用
top: 50%结合
translateX(-50%)translateY(-50%) code>以动态垂直/水平居中元素。
In supported browsers (most of them), you can use
top: 50%
/left: 50%
in combination withtranslateX(-50%) translateY(-50%)
to dynamically vertically/horizontally center the element..container { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); }
-
方法2 - Flexbox方法:
此处示例 / 全屏示例
Approach 2 - Flexbox method:
Example Here / Full Screen Example
在支持的浏览器中,将
,并将
align-items:center
显示为 flex
中心和 justify-content:center
用于水平居中。只要不要忘记为其他浏览器支持添加供应商前缀(参见示例)。
In supported browsers, set the display
of the targeted element to flex
and use align-items: center
for vertical centering and justify-content: center
for horizontal centering. Just don't forget to add vendor prefixes for additional browser support (see example).
html, body, .container {
height: 100%;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
Approach 3 -
table-cell
/vertical-align: middle
:Example Here / Full Screen Example
在某些情况下,您需要确保 html
/ body
元素的高度设置为 100%。
In some cases, you will need to ensure that the html
/body
element's height is set to 100%
.
对于垂直对齐,设置父元素的 width
code> height 到 100%
并添加 display:table
。然后对于子元素,将显示
更改为 table-cell
,并添加 vertical-align :middle
。
For vertical alignment, set the parent element's width
/height
to 100%
and add display: table
. Then for the child element, change the display
to table-cell
and add vertical-align: middle
.
对于水平居中,您可以添加 text-align:center
将文本和任何其他 inline
子元素居中。或者,假设元素阻塞
级别,您可以使用 margin:0 auto
。
For horizontal centering, you could either add text-align: center
to center the text and any other inline
children elements. Alternatively, you could use margin: 0 auto
, assuming the element is block
level.
html, body {
height: 100%;
}
.parent {
width: 100%;
height: 100%;
display: table;
text-align: center;
}
.parent > .child {
display: table-cell;
vertical-align: middle;
}
此方法假设文本具有已知高度, 18px
。只需从顶部相对于父元素绝对定位元素 50%
。使用元素已知高度一半的负值 margin-top
值,在这种情况下为 -9px
。 / p>
This approach assumes that the text has a known height - in this instance, 18px
. Just absolutely position the element 50%
from the top, relative to the parent element. Use a negative margin-top
value that is half of the element's known height, in this case - -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;
}
-
方法5 -
line-height
方法(Least flexible - not recommended):
Approach 5 - The
line-height
method (Least flexible - not suggested):Example Here
在某些情况下,父元素将具有固定的高度。对于垂直居中,所有你需要做的是在子元素上设置一个 line-height
值等于父元素的固定高度。
In some cases, the parent element will have a fixed height. For vertical centering, all you have to do is set a line-height
value on the child element equal to the fixed height of the parent element.
虽然这个解决方案在某些情况下可以工作,但值得注意的是,当有多行文本时,它不会工作 - like this 。
Though this solution will work in some cases, it's worth noting that it won't work when there are multiple lines of text - like this.
.parent {
height: 200px;
width: 400px;
text-align: center;
}
.parent > .child {
line-height: 200px;
}
这篇关于如何水平和垂直地居中元素?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!