html - 如何将较小的文本与较大的 css 居中

Question

如何使较小的文本与较大的 CSS 居中？

这是我的代码:

<div class="header">
    <div class="navbar"> 
        <img src="img/logo.png" alt="" style="">
        <font color="white">LOGO</font> 
            <div class="menuleft">          
                <a href="home">HOME </a>
                <a href="images">PORTOFOLIO </a>
                <a href="link1">LINK1 </a>
                <a href="link2">LINK2 </a>
                <a href="link3">LINK3 </a>
            </div>
    </div>
</div> 

http://jsfiddle.net/sGtcE/11/

Answer 1

为了使文本垂直居中，您不能使用 vertical-align。由于 .menuleft(子)div 位于 .navbar(父)div 内，我将父级设置为 position: relative; ，然后为 child 输入以下代码:

.menuleft {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

说明一下，position: absolute;是要求使用top: 50%;定位，也就是说child会定位到自己的50%距父 div 顶部的宽度。 transform: translateY(-50%); 将子级在 Y 轴上的位置更改为父级 div 的 -50%，使子级在 y 轴上垂直居中于父级内部. right: 0; 只是 float: right; 的替代品，因为你不能将 float 与绝对定位的元素一起使用。

Here is an updated JSFiddle.

---

如有任何问题，请随时提出。