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

Posted 2023-03-05

技术标签:

【中文标题】如何在ul li中对齐文本？ [复制]【英文标题】：How to align text in the middle in ul li? [duplicate] 【发布时间】：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 :) 【参考方案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 以使出现的按钮中的文本居中。太好了，再次感谢！！这很有帮助...

以上是关于如何在ul li中对齐文本？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章

ul li 文本垂直对齐略低于垂直中心

css 如何设置ul的列表图标和列表文字对齐

如何对齐复选框和标签标签？ [复制]

在 ul li 中垂直居中文本

li内的CSS垂直对齐文本

div + css，UL的LI 中，对LI设置了list-style-image，LI中的文字是放在a标签中的，如何让图片和文字对齐？