Question

这是我页面的标题：

--------------------------------
 Logo  | fixed  | Title with    
 Image | margin | unknown width 
--------------------------------

我想在页面中水平居中整个标题。目前，我将徽标图像设置为容器的背景图像，并将标题包装在容器中。

HTML是：

<header role="banner">
  <div class="logo">
    <h1>Title</h1>
  </div>
</header>

CSS是：

header[role="banner"] .logo{
  height: 76px;
  background: url(/images/logo.png) no-repeat;
}

.logo h1{
  line-height: 76px;
  text-indent: 96px;
}

在你回答之前，请注意这个问题的难点在于：

标题的宽度未知。
标题左侧有徽标图片。只有标题的中心是我已经知道如何做而不是我想要的。对图像居中是错误的 - [logo + title]要居中，logo不应该在标题中居中。

Answer 1

我不确定您的HTML是否是拥有徽标和页面标题的最佳方式。我个人会使用<img>来获取徽标。

您可以使用display: table和display: table单元格进行居中而不知道宽度。

以下是我使用徽标图片的方式：

HTML

<header role="banner">
    <div class="extra-container">
      <div class="logo">
        <img src="http://placehold.it/100x76" alt="Logo Image" />
      </div>
      <h1>Title</h1>
    </div>
</header>

CSS

header[role="banner"] {
  display: table;
  margin: 0 auto;
}

header[role="banner"] .extra-container {
  display: table-cell;
}

header[role="banner"] .logo {
  margin-right: 40px;
  float: left;
}

header[role="banner"] .logo img {
  display: block;
}

h1{
  line-height: 76px;
  display: inline-block;
}

http://jsbin.com/UhIqUXe/1/edit

Answer 2

说实话，您不需要<div>。像这样制作<header>背景图片的背景：

header[role="banner"] {
  background: url(/images/logo.png) center top no-repeat;
  width: 100%;
  height: 76px;
}

将标题置于text-align: center;

的中心位置

Answer 3

标题需要指定宽度才能使边距技巧起作用。如果您不知道确切的宽度，可以使用标题的百分比。

Answer 4

查看此来源CSS-Trick

最佳方式应该设置保证金..

margin:0px auto 0px auto;

这会将top和bottom的边距设置为0px，将左右边距设置为auto，

这会欺骗中心的wrapperDiv（图像或文本的容器）

如何将未知宽度的[图像+文本]居中？

4 个答案: