标题栏上的中心元素，具有浮动<li>元素。</li>

Question

我的网站顶部有一个标题栏。在<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,，您可以看到标题不是真正居中。

Answer 1

当text-align：center时，让一些东西在中心完美对齐的好方法;不是一个选项是执行以下操作：

1）获取您想要居中的元素的确切宽度（div，hx标签等）
2）将元素置于绝对位置，使项目的位置不受其他元素的影响 2）将位置设置为左：50％（元素的开头恰好是中间的一半）然后给出左边距：项目宽度的负半边。

实施例 在你的JS小提琴你的h1是106px宽。所以对于你的css你会把

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

UPDATED JS FIDDLE

Answer 2

你可以尝试

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