Question

我已经尝试过搜索这个问题，但我仍然没有得到我的问题所在。我有一个由徽标组成的标题，然后是一些标题文字并排显示。我希望这对在页面上居中。在下面的示例中，它们并排显示，但一直显示在页面左侧：

CSS：

#header_block {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    width: 80%
    text-align: center;
}

.header_item {
    display:inline-block;
}

HTML：

<div id='header_block'>
    <img class='header_item' src="img/logo.png" style="width:80px; height:80px;">
    <h1 class='header_item'>Title Goes Here</h1>
</div>

我尝试过各种各样的变化，但是对中部分对我来说不起作用。你能帮我解释一下我的困惑吗？非常感谢提前。

Answer 1

这是因为margin:auto需要为容器指定宽度，在你的语法中你丢失分号;后宽度我不知道可能会是一个错字而且除了您需要设置vertical-align css规则以使其具体化

#header_block {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    width: 80%; /*<-- added semi colon*/
    text-align: center;
}
.header_item {
   display: inline-block;
   vertical-align: middle; /* add this */
}

Demo

Answer 2

宽度声明之后只是缺少;吗？

添加它，我认为没有问题

Answer 3

假设您想要水平居中，我会使用以下CSS：

img{
    margin-left:auto;
    margin-right:auto;
    width:80%;
    display:block;
}
.header_item{
    text-align:center;
}

Answer 4

你的标题栏向左移动，因为margin-left：auto将它放在那里。如果从＃header-block中删除width属性，则可以执行以下操作：

    #header-block {
      position: relative;
      margin-left: 50%;   /* centers the header-block's left edge, 
                             but still too far */ 
      left: -159px;       /* accounts for 1/2 the width of inner 
                             content, and moves it back to the 
                             left... now it's centered */
    }

请注意，我遵循使用连字符表示CSS类名而不是下划线的惯例。

我为你创建了codepen example。

Answer 5

为什么不做 -

margin-left: 10%;
margin-right: 10%;

无法将徽标和文本并排显示在中心位置

5 个答案:

Demo