在定义的宽度/高度中垂直居中任何内容的正确方法是什么div
。
在示例中,有两个高度不同的内容,使用 class 垂直居中的最佳方法是什么.content
。(它适用于每个浏览器,没有解决方案table-cell
)
有一些解决方案,但想知道其他想法,一个是使用position:absolute; top:0; bottom: 0;
and margin auto
。
在定义的宽度/高度中垂直居中任何内容的正确方法是什么div
。
在示例中,有两个高度不同的内容,使用 class 垂直居中的最佳方法是什么.content
。(它适用于每个浏览器,没有解决方案table-cell
)
有一些解决方案,但想知道其他想法,一个是使用position:absolute; top:0; bottom: 0;
and margin auto
。
我对此进行了一些研究,发现您有四个选择:
如果你不介意display:table-cell
在你的父 div 上使用,你可以使用以下选项:
.area{
height: 100px;
width: 100px;
background: red;
margin:10px;
text-align: center;
display:table-cell;
vertical-align:middle;
}
.area{
height: 100px;
width: 100px;
background: red;
margin:10px;
text-align: center;
display:block;
}
.content {
height: 100px;
width: 100px;
display:table-cell;
vertical-align:middle;
}
.area{
background: red;
margin:10px;
text-align: center;
display:block;
float: left;
}
.content {
display:table-cell;
vertical-align:middle;
height: 100px;
width: 100px;
}
我在这个版本中遇到的唯一问题是,您似乎必须为每个特定的实现创建 css。这样做的原因是内容 div 需要具有您的文本将填充的设置高度,并且margin-top 将被计算出来。这个问题可以在演示中看到。您可以通过更改内容 div 的高度 % 并将其乘以 -.5 来获得您的 margin-top 值,手动使其适用于每个场景。
.area{
position:relative;
display:block;
height:100px;
width:100px;
border:1px solid black;
background:red;
margin:10px;
}
.content {
position:absolute;
top:50%;
height:50%;
width:100px;
margin-top:-25%;
text-align:center;
}
这也可以display: flex
只使用几行代码来完成。这是一个例子:
.container {
width: 100px;
height: 100px;
display: flex;
align-items: center;
}
我在这篇文章中找到了这个解决方案
.parent-element {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
如果元素的高度不固定,它就像一个魅力。
将 div 的内容垂直居中的简单技巧是将行高设置为与高度相同:
<div>this is some line of text!</div>
div {
width: 400px
height: 50px;
line-height: 50px;
}
但这仅适用于一行文本!
最好的方法是使用 div 作为容器和一个带有值的跨度:
.cont {
width: 100px;
height: 30px;
display: table;
}
.val {
display: table-cell;
vertical-align: middle;
}
<div class="cont">
<span class="val">CZECH REPUBLIC, 24532 PRAGUE, Sesame Street 123</span>
</div>
我会说添加一个带有句点的段落,并像这样设置它的样式:
<p class="center">.</p>
<style>
.center {font-size: 0px; margin-bottom: anyPercentage%;}
</style>
您可能需要玩弄百分比才能正确
边距:all_four_margin
通过为 all_four_margin 提供 50% 将元素放置在中心
style="margin: 50%"
您也可以将其应用于以下
边距:右上左下
边距:右上和左下
边距:上&下右&左
通过给出适当的 % 我们可以在任何我们想要的地方获得元素。