如何水平和垂直居中一个元素

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

当前回答

下面是如何使用两个简单的flexbox属性在两个轴上居中n个div:

设置容器的高度:在这里，主体被设置为至少100个视口高度。对齐项目:中心;如果弯曲方向是行，将垂直中心块，否则水平，如果弯曲方向是列 justify-content:空间;将分配自由空间垂直如果弯曲方向是行或水平如果弯曲方向是列围绕div元素

身体{ 最小高度:100 vh; 显示:flex; 对齐项目:中心; justify-content:空间; ｝ < div > foo < / div > 酒吧< div > < / div >

2019-04-24 09:38:41

其他回答

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

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

2021-08-24 07:44:13

只要让上下左右都为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>

2017-06-21 06:16:19

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

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

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

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

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

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

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

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

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

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

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

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

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

2017-02-21 08:53:38

CSS网格:位置项

最后，我们有place-items: center for CSS Grid以使它更容易。

HTML

<div class="parent">
  <div class="to-center"></div>
</div>

CSS

.parent {
  display: grid;
  place-items: center;
}

输出:

超文本标记语言身体{ 高度:100%; ｝ .container { 显示:网格; 名:中心; 高度:100%; ｝ .center { 背景:# 5 f85db; 颜色:# fff; 粗细:大胆的; 字体类型:大河马字体; 填充:10 px; ｝ < div class = "容器" > <div class="center" contenteditable>我总是超级集中在我的父母</div> < / div >

2020-07-09 14:44:31

最简单的flexbox方法:

将单个元素垂直和水平居中的最简单方法是使其成为一个伸缩项目，并将其边缘设置为auto:

如果将自动边距应用于伸缩项目，该项目将自动扩展其指定的边距，以占用flex中的额外空间容器……

.flex-container { 身高:150 px; 显示:flex; } .flex-item { 保证金:汽车; } < div class = " flex-container”> < div class = " flex-item”> 这个应该居中! < / div > < / div >

这种在每个方向上的边距扩展将把元素推到其容器的中间位置。

2020-05-10 11:31:06

如何水平和垂直居中一个元素

推荐文章

最新文章

标签