0

这是我页面的标题：

--------------------------------
 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;
}

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

  1. 标题宽度未知。
  2. 标题左侧有一个徽标图像。只有将标题居中是我已经知道该怎么做但不是我想要的。图片居中是错误的——[logo + title] 应该居中，logo 不应该在标题中居中。
4

4 回答 4

2

我不确定您的 HTML 是否是拥有徽标和页面标题的最佳方式。我个人会选择一个<img>标志。

您可以在不知道宽度的情况下使用display: tableand单元格进行居中。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

于 2013-11-08T00:13:02.903 回答
0

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

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

并将您的标题居中放置text-align: center;

于 2013-11-08T00:01:04.373 回答
0

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

于 2013-11-08T00:01:28.600 回答
-2

看看这个源CSS-Trick

最好的方法应该是设置边距..

margin:0px auto 0px auto;

这会将顶部和底部的边距设置为 0px，将左右边距设置为自动，

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

于 2013-11-07T23:57:23.933 回答