将元素居中和定位在同一行上

Question

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

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

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

Answer 3

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

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>