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

Question

我进行了广泛的搜索，并看到了许多关于如何使用vertical-align属性和vertical-align属性line-height文本的示例。然而，我所有的努力似乎都没有结果，因为我无法让我的文本垂直对齐。如何将文本垂直对齐以居中？ 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;
}

Answer 1

您可以使用显示为内联框的伪元素，使用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;
}

修改

如果你<{1}}上的 重置display和vertical-align，则链接可以分散在几行（下面的演示）：

＆＃13;

＆＃13;

<a>

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

}

Answer 3

你试过

吗？

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

您的文字位于标签内，因此在css中添加a可以解决您的问题：）

Answer 4

如果可以使用flexbox，则可以摆脱以下CSS：

CSS

select add_months(trunc(current_timestamp(), 'MONTH'), -3) ;

+-------------+--+
|     _c0     |
+-------------+--+
| 2019-06-01  |
+-------------+--+

更新（使用auto margins）

您也可以这样：

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

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;
  */
}