有什么办法可以将html元素垂直或水平居中放置在主要父对象中?
<center></center>
标签
<center>
标签在大约12年前被弃用。
有什么办法可以将html元素垂直或水平居中放置在主要父对象中?
<center></center>
标签
<center>
标签在大约12年前被弃用。
Answers:
更新:虽然这个答案早在2013年初就可能是正确的,但现在不应该再使用。正确的解决方案使用offsets。
至于其他用户的建议,也可以使用本机引导程序类,例如:
class="text-center"
class="pagination-centered"
感谢@Henning和@trejder
class="text-center"
.pagination-centered
作为替代。
text-center
布局是非常不好的做法。在Bootstrap中对齐列的正确方法是使用col-XX-offset-Y
类。getbootstrap.com/css/#grid-offsetting。这个答案可能在2013年是正确的,但今天不再使用。
对于此问题的未来访问者:
如果您尝试在div中将图像居中,但图像无法居中,则可以描述您的问题:
<div class="col-sm-4 text-center">
<img class="img-responsive text-center" src="myPic.jpg" />
</div>
的img-responsive
类添加display:block
到图像标签,其停止指令text-align:center
(text-center
从工作类)。
解:
<div class="col-sm-4">
<img class="img-responsive center-block" src="myPic.jpg" />
</div>
添加center-block
该类将覆盖display:block
使用img-responsive
该类所放置的指令。
如果没有img-responsive
课程,则只需添加text-center
课程即可将图片居中
另外,您还应该了解flexbox的基础知识以及如何使用它,因为Bootstrap4现在本地使用了它。
这是Brad Schiff精彩的快节奏视频教程
这是一个很棒的备忘单
更新于2018
在引导4中,定心方法已经改变..
BS4中的水平中心
text-center
仍用于display:inline
元素mx-auto
取代center-block
中心display:flex
儿童offset-*
或 mx-auto
可用于居中网格列mx-auto
(自动x轴边距)将围绕display:block
或display:flex
具有一元件限定的宽度,( ,,%
等。)。默认情况下,在网格列上使用Flexbox,因此还有多种flexbox居中方法。vw
px
有关BS4中的垂直居中的信息,请参见 https://stackoverflow.com/a/41464397/171456
您可以像这样直接写入您的css文件:
.content {
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
}
<div class = "content" >
<p> some text </p>
</div>
我用这个
<style>
html, body {
height: 100%;
margin: 0;
padding: 0 0;
}
.container-fluid {
height: 100%;
display: table;
width: 100%;
padding-right: 0;
padding-left: 0;
}
.row-fluid {
height: 100%;
display: table-cell;
vertical-align: middle;
width: 100%;
}
.centering {
float: none;
margin: 0 auto;
}
</style>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="offset3 span6 centering">
content here
</div>
</div>
</div>
</body>
对于水平居中,您可以具有以下内容:
.centering{
float:none;
margin:0 auto
}
<div class="span8 centering"></div>
<img src="img/logo.png" style="float:none; margin:0 auto" />
。周围img
有父母div
和给予.text-center
或.pagination-centered
类家长工程就像一个魅力。
我喜欢类似问题的解决方案。https://stackoverflow.com/a/25036303/2364401text-center
在实际的表数据<td>
和表头<th>
元素上使用bootstraps 类。所以
<td class="text-center">Cell data</td>
和
<th class="text-center">Header cell data</th>
使用bootstrap 4,您可以使用flex
<div class="d-flex justify-content-center align-items-center">
<button type="submit" class="btn btn-primary">Create</button>
</div>
bootstrap 4 + Flex解决此问题
您可以使用
<div class="d-flex justify-content-center align-items-center">
<button type="submit" class="btn btn-primary">Create</button>
</div>
它应该居中水平和垂直居中
用于bootstrap4垂直中心的一些项目
d-flex用于弹性规则
垂直方向在项目上的弹性柱
居中对齐内容中心
style ='height:300px;' 必须具有用于计算中心或使用h-100等级的设定点
<div class="d-flex flex-column justify-content-center bg-secondary" style="
height: 300px;
">
<div class="p-2 bg-primary">Flex item</div>
<div class="p-2 bg-primary">Flex item</div>
<div class="p-2 bg-primary">Flex item</div>
</div>