在同一行居中和定位元素

Question

我有一个关于居中和定位元素的问题。我在左边有一段文字，在这种情况下只有一个单词 about，它应该居中并与电子邮件在同一行。

nav {
	text-align: center;
}

<address>
  <a href="#">Some text</a>
  <br>
  hi(at)mail.com
</address>

<nav>
  <a href="#">about</a>
</nav>

我试图将地址浮动到左侧，但导航不再位于中心。任何想法如何做到这一点？它必须很容易，但我就是不知道如何。

编辑

导航应该以整个视口为中心，我目前的答案是绝对定位导航并将左右设置为 0。但我不知道这是否是最好的方法。

它应该是什么样子：

Answer 1

我不知道这是否是最好的方法，但它看起来像你想要做的

nav {
left:50%;
	text-align: center;
}
address{
  float:left;
}

<address>
  <a href="#">Some text</a>
  <br>
  hi(at)mail.com
</address>

<nav>
<br/>
  <a href="#">about</a>
</nav>

Answer 2

考虑使用display:table-cell。 这样我们就可以将内容垂直对齐到容器元素的底部。

HTML：

<div class="container">
  <address>
    <a href="#">Some text</a>
    <br>
    hi(at)mail.com
  </address>
  <nav>
    <a href="#">about</a>
  </nav>
</div>

CSS：（编辑为在表格单元格项目中包含 50% 的宽度）

.container{
  display:table;
  width:100%;
}
address, nav{
  display:table-cell;
  vertical-align:bottom;
  width:50%;
}

在此处查看代码笔：http://codepen.io/eoghanTadhg/pen/NNYgYg

Answer 3

我想向您展示这个解决方案，因为它结合了一些有时被认为有问题的想法。在这里，我使用默认情况下 inline-block 元素与其内容的最后一行垂直对齐的事实。这正是你所需要的。此外，它使用零宽度块的可见溢出，将导航内容水平居中于包含块内。

nav {
    text-align: center;
    display:inline-block;
    width:100%;
    margin-left:-0.25em;
}
address { 
    display:inline-block;
    width:0;
}
address > * { 
    white-space: nowrap;
}

<address>
  <a href="#">Some text</a>
  <br>
  <span>hi(at)mail.com</span>
</address>

<nav>
  <a href="#">about</a>
</nav>