如何垂直对齐嵌套在无序列表中的锚元素内的文本

Posted 2023-03-05

【中文标题】如何垂直对齐嵌套在无序列表中的锚元素内的文本

【英文标题】：How do I vertically align text inside an anchor element, which is nested within an unordered list

【发布时间】：2014-08-12 15:49:38

【问题描述】：

我已经广泛搜索并看到了许多关于如何使用vertical-align 属性和line-height 属性来vertical-align 文本的示例。然而，我所有的努力似乎都没有结果，因为我无法让我的文本垂直对齐。如何垂直对齐文本以使其居中？ height 属性不固定，所以我不能使用line-height。

HTML

<nav>
    <ul>
        <li><a href="html/login.html">Login</a></li>
        <li><a href="html/user_registration.html">Register</a></li>
        <li><a href="#">Programmes Offered</a></li>
    </ul>
</nav> 

CSS

nav

    height: 30%;
    width: 100%;


nav ul

    height: 100%;
    margin: 0px;


nav ul li

    height: 33%;
    width: 100%;
    vertical-align: middle;

【参考方案1】：

如果你可以使用 flexbox，你可以使用下面的 css：

CSS

ul li a 
    display:flex; // Enables flexbox 
    justify-content: center; // Center on main axis
    align-items: center; // Center on cross axis

更新（使用auto margins）

你也可以这样做：

ul li  display:flex 
li a  margin: auto 

/* These rules are just to make things easier to see. */

nav 
  margin: 0 auto;
  margin-top: 5rem;
  border: 1px dotted green;
  width: 100%;


ul 
  padding: 0;
  display: flex;
  justify-content: space-around;


li 
  height: 3rem;
  padding: 2rem;
  border: 1px dotted red;



/* Here are what I am trying to illustrate */

ul li 
  display: flex;


a 
  margin: auto;
  /* or adjust them one by one, by targeting 
     the ones you want and setting
     using each margin like this:
  
    margin-top: auto;
    margin-right: auto;
    margin-bottom: auto;
    margin-left: auto;
  */

<nav>
  <ul>
    <li><a href="html/login.html">Login</a></li>
    <li><a href="html/user_registration.html">Register</a></li>
    <li><a href="#">Programmes Offered</a></li>
  </ul>
</nav>

【参考方案2】：

您可以使用显示为内联框的伪元素，使用 li 的全高并垂直对齐到 midlle。 DEMO

body, html 
    height:100%; /* needed for demo */

nav 
    height: 50%; /* increased for demo */
    width: 100%;

nav ul 
    height: 100%;
    margin: 0px;

nav ul li 
    height: 33%;
    box-shadow:inset 0 0 0 1px; /* show me li , for demo */

nav ul li:before 
    content:'';
    height:100%;
    display:inline-block;
    vertical-align: middle;

编辑

如果您也在<a> 上重置display 和vertical-align，则链接可以分散在几行（下面的演示）：

body,
html 
  height: 100%;


nav 
  height: 70%; /* height set for snippet demo purpose, could be really too much  */
  width: 100%;


nav ul 
  height: 100%; /* will follow height, inherit height value , set in nav if any avalaible  */
  margin: 0px;


nav ul li 
  height: 33%;
  /* see me and my center*/
  box-shadow: inset 0 0 0 1px;
  background:linear-gradient(to top, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.2) 50%);


nav ul li:before 
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;


a 
  display: inline-block;
  vertical-align: middle;

<nav>
  <ul>
    <li><a href="html/login.html">Login</a>
    </li>
    <li><a href="html/user_registration.html">Register</a>
    </li>
    <li><a href="#">Programmes<br/> Offered</a>
    </li>
  </ul>
</nav>

【讨论】：

这行得通。但是，我不熟悉 content 属性，我想我的日子还没有结束。谢谢。

我不知道为什么，但我不得不把我的高度提高到：110%。我试图将文本垂直居中放置在绝对定位的锚标记中，并且伪类 :before 技巧奏效了！谢谢！！完成这件事的时间太长了。

【参考方案3】：

vertical-align 将内联元素与其兄弟元素对齐.. 除非在表格单元格中使用。

我认为没有垂直对齐的书本方法..但这应该可行：

D E M O

nav ul li

    background:#f1f1f1;
    height: 33%;
    width: 100%;
    border-top:1px solid #e0e0e0;


nav ul li a

    display:block;
    position:relative;
    top:50%;
    -webkit-transform:translate(0,-50%);
    -moz-transform:translate(0,-50%);
    transform:translate(0,-50%);

【讨论】：

恐怕这行不通。我希望有一种不涉及转换的更简单的方法。然而，它并没有奏效。垂直对齐太麻烦了……我不知道。

@Kis 你看过答案中的 jsfiddle 演示吗？

哎呀我忘了添加对非 chrome 浏览器的支持。我会更新这个答案。jsfiddle.net/RGeWL/3

【参考方案4】：

你试过了吗

nav ul li a

    height: 33%;
    width: 100%;
    vertical-align: 5px; //(you can make it 10px or -10px, just so it fits your style)

您的文本在 a 标签内，因此在 css 中添加 a 可能会解决您的问题 :)

【讨论】：

这不起作用..它不会将 A 标签垂直对齐到 LI 的高度

你到底想做什么，我不明白？

我之前尝试过，但没有成功。为了安心，我又试了一次，但还是不行。

我希望我的文字出现在中间，目前它在顶部。

可以使用vertical-align: 5px; （你可以做 10px，-10px，只要对齐它，让它粘在你想要的地方，我认为这对你有用）。 P.P 我编辑了我的代码，所以你可以看到