边界从中心推文本

Question

我试图在页面的顶部中心添加h1文字，但是当我添加border width border时页面的整个顶部。当我使用CSS减少元素的width时，border会将文本向左推。

更改宽度之前

更改宽度后

演示：

JSfiddle

Answer 1

你可以在你的css中使用margin: 0 auto

h1{
    text-align: center;
    border: 3px solid green;
    width: 50%;
    margin:0 auto;
}

希望这有帮助

Answer 2

删除float属性并将margin: 0 auto添加到中心h1，因为它是一个块元素。

JSFiddle

Answer 3

尝试在css中粘贴它，

h1{
text-align: center;
border: 3px solid green;
width: 50%;
margin:0 auto;
}

所做的更改是：已删除“float：center;”并且添加“margin：0 auto;”

希望这有帮助。

Answer 4

问题在于浮动，中心没有浮动，只是左右浮动。因为您已声明宽度，您可以使用margin：0 auto，它将使您的h1居中。请记住，如果删除宽度，则边距：0 auto将无效。

h1{
    text-align: center;
    border: 3px solid green;
    width: 50%;
    margin:0 auto;
}