Question

我正在尝试将h1标签居中，但是当我设置它的宽度时它不起作用。当我没有设置特定的宽度时，它可以工作，但我想保持宽度为400.我的代码在下面。

＆＃13;

body {
    margin: 0;
    font-family: Arial;
    font-size: 1em;
}

.navbar-ul {
    margin: 0;
    color: white;
    background-color: black;
    overflow: hidden;
    -webkit-box-shadow: -1px 10px 20px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: -1px 10px 20px 0px rgba(0,0,0,0.75);
    box-shadow: -1px 10px 20px 0px rgba(0,0,0,0.75);
}

a {
    color: white;
}

li, a {
    text-decoration: none;
    display: inline-block;
    padding: 10px;
    background-color: black;
    transition: 1s;
    border: solid 1px transparent;
}

li:hover, li:hover a {
    background-color: #3f3f3f;
}

.header-text {
    border: solid 5px black;
    width: 400px;
    text-align: center;
    padding: 25px;
}

li {
    list-style-type: none;
    float: left;
}

＆＃13;

<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="utf-8">
        <title>Dark Website Template by Jordan Baron</title>
        <link rel="stylesheet" href="styles-main.css">
    </head>
    
    <body>
        <div class="navbar">
            <ul class="navbar-ul">
                <strong><li><a href="#">HOME</a></li>
                <li><a href="#">CONTACT</a></li>
                <li><a href="#">ABOUT</a></li></strong>
            </ul>
        </div>
        <strong><h1 class="header-text">DARK</h1></strong>
        
    </body>
    
</html>

＆＃13;

我不认为其他因素是问题，但嘿，这是一种可能性。

Answer 1

如果您尝试将整个元素居中，则可以在标题的左右边距上使用auto值：

.header-text {
   margin: 0 auto;
}

Answer 2

h1 - 元素是一个块元素。这意味着默认宽度为100%。通过使用text-align: center，您只需将文本置于元素内，而不是h1本身。

当您将宽度设置为400px时，文本仍然在块内居中，但元素本身不再具有全宽。

解决方案是将元素作为一个整体居中。这可以通过将水平margin设置为auto来完成。

这应该适合你：

＆＃13;

.header-text {
  border: solid 5px black;
  width: 400px;
  text-align: center;
  padding: 25px;
  margin: 0 auto;
}

＆＃13;

<h1 class="header-text">DARK</h1>

＆＃13;

有关使用CSS进行居中的详细信息，请查看本指南：https://css-tricks.com/centering-css-complete-guide/

H1不会以设定的宽度居中

2 个答案: