Hem*_*jak 144 html css text-align
我使用css样式text-align来对齐HTML中容器内的内容.这个工作正常,而内容是文本或浏览器是IE.但否则它不起作用.
另外顾名思义它基本上用于对齐文本.align属性已被弃用.
有没有其他方法来对齐html中的内容？
bob*_*nce 207
text-align对齐文本和其他内联内容.它不对齐块元素子元素.
要做到这一点,你想给你想要的元素对齐一个宽度,用'auto'左右边距.这是符合标准的方式,除了IE5.x以外的任何地方都可以使用.
<div style="width: 50%; margin: 0 auto;">Hello</div>
为了在IE6中工作,您需要使用合适的DOCTYPE 确保标准模式已启用.
如果你真的需要支持IE5/Quirks模式,现在你不应该这样做,可以将两种不同的方法结合起来进行居中:
<div style="text-align: center">
<div style="width: 50%; margin: 0 auto; text-align: left">Hello</div>
</div>
(显然,样式最好放在样式表中,但内联版本是说明性的.)
你也可以这样做:
HTML
<body>
<div id="wrapper_1">
<div id="container_1"></div>
</div>
</body>
CSS
body { width: 100%; margin: 0; padding: 0; overflow: hidden; }
#wrapper_1 { clear: left; float: left; position: relative; left: 50%; }
#container_1 { display: block; float: left; position: relative; right: 50%; }
正如Artem Russakovskii也提到的那样,请阅读Mattew James Taylor的原始文章以获得完整描述.
小智 8
<div class="content">Hello</div>
.content {
margin-top:auto;
margin-bottom:auto;
text-align:center;
}
老实说,我讨厌到目前为止我见过的所有解决方案,我会告诉你原因:他们似乎没有正确对齐......所以这就是我通常做的事情:
我知道每个div的像素值和它们各自的边距都有...所以我做了以下几点.
我将创建一个包装器div,它具有绝对位置和50%的左值...所以这个div现在从屏幕中间开始,然后我减去div宽度的所有内容的一半...我得到了美丽的缩放内容......我认为这也适用于所有浏览器.自己尝试一下(这个例子假设你网站上的所有内容都包含在使用这个包装类的div标签中,其中所有内容的宽度都是200px):
.wrapper {
position: absolute;
left: 50%;
margin-left: -100px;
}
编辑:我忘了添加...你可能还想设置宽度:0px; 在这个包装器div上,某些浏览器不显示滚动条,然后你可以对所有内部div使用绝对定位.
使用top:50%和margin-top也可以使用AMAZING来垂直对齐你的内容.干杯!
以下是一直对我有用的方法
将父 div 的显示设置为display: flex;，您可以使用justify-content: center;（对齐主轴上的项目）和align-items: center;（对齐横轴上的项目）对齐div 内的子元素。
如果您有多个子元素并且想要控制它们的排列方式（列/行），那么您还可以添加flex-direction属性。
工作示例：
.parent {
align-items: center;
border: 1px solid black;
display: flex;
justify-content: center;
height: 250px;
width: 250px;
}
.child {
border: 1px solid black;
height: 50px;
width: 50px;
}<div class="parent">
<div class="child"></div>
</div>2.（旧方法）使用位置、边距属性和固定大小
工作示例：
.parent {
border: 1px solid black;
height: 250px;
position: relative;
width: 250px;
}
.child {
border: 1px solid black;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 50px;
position: absolute;
width: 50px;
}<div class="parent">
<div class="child"></div>
</div>