时间戳

首页 > 解决方案 > 为什么文本没有与边框的中心对齐？

html - 为什么文本没有与边框的中心对齐？

问题描述

未对齐的图像

<menu style="list-style:none;text-align:center;font-size:200%;border: 6px solid white;border-style:dotted;margin-top:100px;margin-left:600px;margin-right:600px;padding-top:30px;color:GhostWhite;background: rgb(0,0,0,0.8)">

Idk 为什么文本没有在框的中心对齐，即使我给了 text-align:center :(.(image attach ) 任何帮助将不胜感激！

标签： htmlcss

解决方案

我的猜测是您在框中使用了一个列表 - 浏览器在 ul 元素的左侧放置了 40px 的填充。因此，请尝试将 padding::0 应用于您的 UL。

.list-wrapper {
  width: 200px;
  border: solid 1px #222;
  margin: 0 auto;
  text-align: center;
}

ul {
 list-style: none;
}

.with-padding-removed {
  padding-left: 0;
}
<h2>With padding removed</h2>

<div class="list-wrapper">
  <ul class="with-padding-removed">
    <li>Expensive breeds</li>
    <li>Cat memes</li>
    <li>Adopt</li>
    <li>Cat pictures</li>
    <li>Best breeds</li>
  </ul>
</div>

<hr/>

<h2>Without padding removed</h2>

<div class="list-wrapper">
  <ul class="without-padding-removed">
    <li>Expensive breeds</li>
    <li>Cat memes</li>
    <li>Adopt</li>
    <li>Cat pictures</li>
    <li>Best breeds</li>
  </ul>
</div>

推荐阅读