如何在ul li中对齐文本？ [复制]答案

【问题标题】：How to align text in the middle in ul li? [duplicate]如何在ul li中对齐文本？ [复制]
【发布时间】：2022-01-24 00:09:04
【问题描述】：

正如您在下面的下拉菜单中看到的那样，虽然我也使用了 text-align: center 和 vertical-align: middle 属性，但文本没有在中间对齐，但它不起作用。文本在中心水平对齐，但在中间不垂直对齐。

a {
  display: block;
  text-decoration: none;
  width: 100%;
  height: 100%;
  color: #999;
}

a:hover {
  color: #777;
}


/* NAVIGATION */

.navigation {
  display: block;
  list-style: none;
  padding: 0;
  width: 150px;
  height: 50px;
  margin: 20px auto;
  background: #95C11F;
  vertical-align: middle;
}

.navigation,
.navigation a.main {
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
}

.navigation:hover,
.navigation:hover a.main {
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
}

.navigation a.main {
  display: block;
  vertical-align: middle;
  line-height: 41px;
  height: 50px;
  font: bold 20px/40px calibri, sans-serif;
  text-align: center;
  text-decoration: none;
  color: #FFF;
  -webkit-transition: 0.1s ease-in-out;
  -o-transition: 0.1s ease-in-out;
  transition: 0.1s ease-in-out;
}

.navigation:hover a.main {
  color: rgba(255, 255, 255, 0.6);
  background: rgba(0, 0, 0, 0.04);
}

.navigation li {
  display: block;
  width: 150px;
  height: 50px;
  background: #F7F7F7;
  font: normal 12px/40px arial, sans-serif !important;
  color: #999;
  text-align: center;
  vertical-align: middle;
  margin: 1px auto;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-transform-origin: 50% 0%;
  -o-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-transform: perspective(350px) rotateX(-90deg);
  -o-transform: perspective(350px) rotateX(-90deg);
  transform: perspective(350px) rotateX(-90deg);
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
}

.navigation li:nth-child(even) {
  background: #F5F5F5;
}

.navigation li:nth-child(odd) {
  background: #EFEFEF;
}

.navigation li.n1 {
  -webkit-transition: 0.1s linear 0.1s;
  -o-transition: 0.1s linear 0.1s;
  transition: 0.1s linear 0.1s;
}

.navigation li.n2 {
  -webkit-transition: 0.1s linear 0.1s;
  -o-transition: 0.1s linear 0.1s;
  transition: 0.1s linear 0.1s;
}

.navigation li.n3 {
  -webkit-transition: 0.1s linear 0.1s;
  -o-transition: 0.1s linear 0.1s;
  transition: 0.1s linear 0.1s;
}

.navigation li.n4 {
  -webkit-transition: 0.2s linear 0.1s;
  -o-transition: 0.2s linear 0.1s;
  transition: 0.2s linear 0.1s;
}

.navigation li.n5 {
  border-radius: 0px 0px 4px 4px;
  -webkit-transition: 0.1s linear 0s;
  -o-transition: 0.1s linear 0s;
  transition: 0.1s linear 0s;
}

.navigation:hover li {
  -webkit-transform: perspective(350px) rotateX(0deg);
  -o-transform: perspective(350px) rotateX(0deg);
  transform: perspective(350px) rotateX(0deg);
  -webkit-transition: 0.1s linear 0s;
  -o-transition: 0.1s linear 0s;
  transition: 0.1s linear 0s;
}

.navigation:hover .n2 {
  -webkit-transition-delay: 0.1s;
  -o-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

.navigation:hover .n3 {
  -webkit-transition-delay: 0.1s;
  -o-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

.navigation:hover .n4 {
  transition-delay: 0.1s;
  -o-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

.navigation:hover .n5 {
  -webkit-transition-delay: 0.1s;
  -o-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

<div class="caption">
  <ul class="navigation">
    <link rel="stylesheet" href="dropdown-style.css">
    <a class="main" href="#url">BUY NOW</a>
    <li class="n1"><a href="#url">BUY ON AMAZON US</a></li>
    <li class="n2"><a href="#url">BUY ON AMAZON CA</a></li>
  </ul>
</div>

请告诉我我应该做哪些更改以使文本垂直居中对齐？

TIA！

【问题讨论】：

现代网络中不需要任何这些供应商前缀。例如，请参阅caniuse.com/transforms2d。
另外，您的列表结构无效。链接和锚元素不允许作为列表元素的子元素。
@isherwood 我用过“text-align: center;”和“垂直对齐：中间；”
所以更新你的帖子说。它现在说的是别的东西。 :)
@TaimoorAhmed 使用line-height等于你的盒子高度，它会自动把文字放在盒子的中心。例如，它是line-height:50px。试一试。享受。 Asalamu，Alykum :)

标签： html css

【解决方案1】：

a {
  display: block;
  text-decoration: none;
  width: 100%;
  color: #999;
}

a:hover {
  color: #777;
}


/* NAVIGATION */

.navigation {
  display: block;
  list-style: none;
  padding: 0;
  width: 150px;
  height: 50px;
  margin: 20px auto;
  background: #95C11F;
  vertical-align: middle;
}

.navigation,
.navigation a.main {
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
}

.navigation:hover,
.navigation:hover a.main {
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
}

.navigation a.main {
  font: bold 20px/40px calibri, sans-serif;
  text-align: center;
  padding: 5px 0;
  text-decoration: none;
  color: #FFF;
  -webkit-transition: 0.1s ease-in-out;
  -o-transition: 0.1s ease-in-out;
  transition: 0.1s ease-in-out;
}

.navigation:hover a.main {
  color: rgba(255, 255, 255, 0.6);
  background: rgba(0, 0, 0, 0.04);
}

.navigation li {
  display: flex;
  align-items: center;
  width: 150px;
  height: 50px;
  background: #F7F7F7;
  font: normal 12px/40px arial, sans-serif !important;
  color: #999;
  text-align: center;
  vertical-align: middle;
  margin: 1px auto;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-transform-origin: 50% 0%;
  -o-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-transform: perspective(350px) rotateX(-90deg);
  -o-transform: perspective(350px) rotateX(-90deg);
  transform: perspective(350px) rotateX(-90deg);
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
}

.navigation li:nth-child(even) {
  background: #F5F5F5;
}

.navigation li:nth-child(odd) {
  background: #EFEFEF;
}

.navigation li.n1 {
  -webkit-transition: 0.1s linear 0.1s;
  -o-transition: 0.1s linear 0.1s;
  transition: 0.1s linear 0.1s;
}

.navigation li.n2 {
  -webkit-transition: 0.1s linear 0.1s;
  -o-transition: 0.1s linear 0.1s;
  transition: 0.1s linear 0.1s;
}

.navigation li.n3 {
  -webkit-transition: 0.1s linear 0.1s;
  -o-transition: 0.1s linear 0.1s;
  transition: 0.1s linear 0.1s;
}

.navigation li.n4 {
  -webkit-transition: 0.2s linear 0.1s;
  -o-transition: 0.2s linear 0.1s;
  transition: 0.2s linear 0.1s;
}

.navigation li.n5 {
  border-radius: 0px 0px 4px 4px;
  -webkit-transition: 0.1s linear 0s;
  -o-transition: 0.1s linear 0s;
  transition: 0.1s linear 0s;
}

.navigation:hover li {
  -webkit-transform: perspective(350px) rotateX(0deg);
  -o-transform: perspective(350px) rotateX(0deg);
  transform: perspective(350px) rotateX(0deg);
  -webkit-transition: 0.1s linear 0s;
  -o-transition: 0.1s linear 0s;
  transition: 0.1s linear 0s;
}

.navigation:hover .n2 {
  -webkit-transition-delay: 0.1s;
  -o-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

.navigation:hover .n3 {
  -webkit-transition-delay: 0.1s;
  -o-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

.navigation:hover .n4 {
  transition-delay: 0.1s;
  -o-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

.navigation:hover .n5 {
  -webkit-transition-delay: 0.1s;
  -o-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

上面的 CSS 应该可以解决您的问题。在复制/粘贴之前将其应用到沙箱中或检查in my codepen。您正在违反问题下的 cmets 中提到的“好代码”规则。我决定跳过它，简单地根据现有的 HTML 提供答案。

【讨论】：

你的意思是在我当前的代码中我必须粘贴 .n1 { display: flex;对齐项目：居中； } 对于每个 n1、n2 和 n3??
我已经编辑了我的答案，对于之前的仓促回复，我很抱歉，我认为这足以帮助你。
谢谢你！现在它看起来真的是我想要的样子。您能告诉我您对代码做了哪些重大更改吗？
我从 a 中删除了 height: 100%，还从 navigation a.main 选择器中删除了 display、vertical-align、line-height 和 height 并添加了 padding: 5px 0 到它和这个 soted退出主按钮，然后我将 display: flex 和 align-items: center 添加到 .navigation li 以使出现的按钮中的文本居中。
太好了，再次感谢！！这很有帮助...