我想使用 CSS 将对象居中而不使用 hack,这可能吗?如何?
我已经尝试过了,但是我的 p 标签不见了。
.centered {
position: fixed;
top: 50%;
left: 50%;
}
有几种方法可以使元素居中。但这取决于您的元素是什么以及我们选择如何显示它:
如果你有{display:inline; }
这很简单。您可以只使用“文本对齐:中心;” 使文本、图像和 div 居中。
如果你有{display:block;}
这有点困难。这取决于您的对象是如何定位的。您的对象可以是相对的、绝对的或固定的。
如果是相对的;那么你可以使用"margin:0 auto;"
,但是你需要一个宽度值。
如果它是绝对定位的,那么你需要指定你的"top:"
和"left:"
值。你还需要一个宽度。如果您知道元素的宽度,最好的方法是使用{left:50%; margin-left:-X}
,其中 X = 元素宽度的 1/2。
HTML:
<div>Centered</div>
CSS:
div {
margin: 0 auto;
width: 200px;
}
现场示例:http: //jsfiddle.net/v3WL5/
请注意,margin: 0 auto;
只有当div
具有宽度时才会生效。
像这样使用margin: auto
:
margin: 0px auto
将此用于一般目的。甚至在任何内容中的 span 或 div :
width:inherit; display:block;margin:0 auto;
用法 :
CSS 代码:
#text-align
{
text-align:center
}
HTML 代码:
<div id="text-align">Content goes here....</div>
http://www.techulator.com/resources/4299-center-Deprecated-tags-HTML.aspx
游戏迟到了,但是您尝试过使用display:flex
父母吗?
我有一个有用的类,它很简单,适用于所有类型的元素:
/* apply this on the parent */
.center {
display:flex;
align-items: center; /*vertical alignement*/
justify-content: center; /* horizontal alignement*/
}
这是相对较新的,但在大约 98% 的主要浏览器中都支持。
不过我建议你学习一下 flexBox,一开始它可能看起来很复杂,但它对所有类型的布局都非常强大!
如果您不需要定位:固定;你可以使用
<center>
Hello
</center>
这在 HTML5 中已弃用