我试着像这样将h1放在body标记的中心:
h1 {margin:0 auto}
http://jsfiddle.net/qPDwY/但它没有居中。我怎么修?
n7taea2i1#
在这种情况下:
h1 { text-align:center; }
**一个
margin:auto规则是在设置元素宽度时使用的,而您还没有这样做。
rhfm7lfc2#
可以通过设置宽度使其居中。
h1 { width:500px; margin: 0 auto; background: gray; text-align: center; }
<body> <h1>My Title</h1> </body>
oxiaedzo3#
text-align: center是最佳选择,但如果您仍然希望使用margin: 0 auto将其居中,则必须为H1(一个块)元素分配一些宽度。你可以通过将margin-left和margin-right设置为auto来居中一个块级元素(并且它有一个固定的宽度,否则它将是全宽的,不需要居中),这通常是通过这样的简写来完成的:
text-align: center
margin: 0 auto
H1
.center-me { margin: 0 auto; }
**来源:**https:css-tricks.com/centering-css-complete-guide/#horizontal-block
wko9yo5t4#
或者,您可以尝试以下操作:
h1 { text-align: center; margin: 0px auto; display; block; }
dwthyt8l5#
b0zn9rqh6#
这就是为什么我用途:
/* Put this inside element/class. */ transform: translateX(400px);
如果它不适合你的屏幕中心,只是调整它,当然,你可以使用一些css和/或js魔术来自动调整它。
6条答案
按热度按时间n7taea2i1#
在这种情况下:
**一个
margin:auto规则是在设置元素宽度时使用的,而您还没有这样做。
rhfm7lfc2#
可以通过设置宽度使其居中。
oxiaedzo3#
text-align: center
是最佳选择,但如果您仍然希望使用margin: 0 auto
将其居中,则必须为H1
(一个块)元素分配一些宽度。你可以通过将margin-left和margin-right设置为auto来居中一个块级元素(并且它有一个固定的宽度,否则它将是全宽的,不需要居中),这通常是通过这样的简写来完成的:
**来源:**https:css-tricks.com/centering-css-complete-guide/#horizontal-block
wko9yo5t4#
或者,您可以尝试以下操作:
dwthyt8l5#
更改宽度以更改位置
b0zn9rqh6#
这就是为什么我用途:
如果它不适合你的屏幕中心,只是调整它,当然,你可以使用一些css和/或js魔术来自动调整它。