0

我的网站顶部有一个标题栏。在<header>标签中，我有一个无序列表，其中有几个列表项浮动到左侧，另一个浮动到右侧。我希望能够粘贴标题的元素死点。做这个的最好方式是什么？到目前为止，我的页面基本上是这样设置的：

<header>
  <ul>
    <li class="left">Item 1</li>
    <li class="right">Item 2</li>
  <ul>

  <h1>Title of site</h1>
</header>

然后<h1>标签有 text-align: center 和 margin-top: -45px，将它放在与列表项相同的级别。问题是，h1 并不完全居中。设置标头以完成此行为的最佳方法是什么？

这是一个示例jfiddle，您可以在其中看到标题并没有真正居中。

4

2 回答 2

1

当 text-align:center; 时使某些东西在中心完美对齐的一个好技巧；不是一个选项是执行以下操作：

1）获取要居中的元素的确切宽度（div、hx 标签等）
2）绝对定位元素，以便项目的位置不受其他元素的影响
2）将位置设置为 left:50%（元素的开始正好是一半）然后给一个margin-left：项目宽度的负一半。

示例在您的 JS 小提琴中，您的 h1 为 106px 宽。所以对于它的 css 你会放

header h1 {
    position:absolute;
    width:106px;
    left:50%;
    margin-left:-53px;
    top:6px;
    font-size: x-large;
    color: white;
}

更新的 JS 小提琴

于 2013-05-27T01:37:33.770 回答
0

你可以试试

h1 { position: absolute; top: 45px; left: 45%; }

或者你可以尝试像这样在标题上方添加一个新的 div

<div id="h1wrapper">Your h1 goes here</div>

在你的 CSS

#h1wrapper { display: block; height: 0px; width: 100%; text-align: center; overflow: visible }
h1 { margin-top: 45px; font-size: 16px; }
于 2013-05-26T21:59:03.417 回答