html - 具有 float <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 没有完全居中。设置 header 以完成此行为的最佳方法是什么？

这是一个例子 jfiddle,您可以在其中看到标题确实居中。

Answer 1

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

1) 获取您想要居中的元素的确切宽度(div、hx 标签等)
2) 绝对定位元素，使元素的位置不受其他元素的影响
2) 将 position 设置为 left:50%(元素的开始恰好是一半)然后给出 margin-left: 元素宽度的负一半。

例子 在你的 JS fiddle 你的 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