DIV UL 内容不在 UL 内居中

Posted 2023-03-29

【中文标题】DIV UL 内容不在 UL 内居中

【英文标题】：DIV UL content not centering within the UL

【发布时间】：2017-03-28 13:09:03

【问题描述】：

我正在为客户处理电子邮件，而这个列表/表格让我很困惑。这是视觉显示。

如您所见，我基本上有 3 列，每列由单独的 <ul> 组成。问题是它们与上面的<h3> 不一致。当我在 DW 的实时视图中单击 <ul> 时，我可以看到内容是右对齐的。

.navlist 
  background-color: #99a6b1;
  height: 400px;
  padding-top: 50px;

.navlist ul 
  display: inline-table;
  margin: 0 auto;

.navlist li 
  list-style-type: none;
  color: #ececed;
  font-size: 16px;
  padding-bottom: 10px;
  text-align: center;

<section>
  <div class="navlist" align="center">
    <h3 style="color: #ececed; padding-bottom: 20px;">Our Commitment</h3>
    <ul>
      <li>
        <img src="https://static1.squarespace.com/static/5756358501dbae2c96b689fe/t/5829efb69de4bb1fe2fd2a37/1479143354215/V3DG+Web+Icons-04.png?format=300w" alt "comprehensive services" >
      </li>
      <li>ComprehensivevServices</li>
    </ul>
    <ul>
      <li>
        <img src="https://static1.squarespace.com/static/5756358501dbae2c96b689fe/t/5829efc329687f358474b73a/1479143366452/V3DG+Web+Icons-05.png?format=300w" alt "Dependable Support" >
      </li>
      <li>Dependable Service</li>
    </ul>
    <ul>
      <li>
        <img src="https://static1.squarespace.com/static/5756358501dbae2c96b689fe/t/5829efd0414fb518a2c06557/1479143379620/?format=300w" alt "Easy To Work With" >
      </li>
      <li>Easy To Work With</li>
    </ul>
  </div>
</section>

我只是希望它按照应有的方式排列。提前感谢您的帮助。

【问题讨论】：

请问您为什么要在此布局中使用列表？

list displaying slightly off centered的可能重复

【参考方案1】：

您是否尝试过删除“ul”的填充？

.navlist ul
    display: inline-table;
    margin: 0 auto;
    padding-left: 0;

这将使您的内容更加集中。

【讨论】：

谢谢大卫！我试过了，但它只是将所有内容压缩到靠近中心图像的位置，因此它们实际上不会显示在靠近中心的位置。

@AlexBradley 这个答案确实解决了你的问题。但是我相信你可能会被最左边的列表项比最右边的更宽，以至于第二个列表项并不完全在“我们的承诺”文本下的中心。即使整个列表都是。

解决方案是让所有三个列表项具有相同的宽度。

【参考方案2】：

将padding-left: 0 添加到.navlist ul

为了保持 li 项目之间的距离，您可以在左右添加一些边距：

.navlist ul
    display: inline-table;
    margin: 0 10px;
    padding-left: 0;

.navlist 
	background-color: #99a6b1;
	height: 400px;
	padding-top: 50px;

.navlist ul
	display: inline-table;
	margin: 0 10px;
  padding-left: 0;

.navlist li 
list-style-type: none;
	color: #ececed;
	font-size: 16px;
	padding-bottom: 10px;
	text-align: center;

<section>
		<div class="navlist" align="center">
			<h3 style="color: #ececed; padding-bottom: 20px;">Our Commitment</h3>
			<ul>
				<li><img src="https://static1.squarespace.com/static/5756358501dbae2c96b689fe/t/5829efb69de4bb1fe2fd2a37/1479143354215/V3DG+Web+Icons-04.png?format=300w" alt"comprehensive services" ></li>
				<li>ComprehensivevServices</li>
			</ul>
			<ul>
				<li><img src="https://static1.squarespace.com/static/5756358501dbae2c96b689fe/t/5829efc329687f358474b73a/1479143366452/V3DG+Web+Icons-05.png?format=300w" alt"Dependable Support" ></li>
				<li>Dependable Service</li>
			</ul>
			<ul>
				<li><img src="https://static1.squarespace.com/static/5756358501dbae2c96b689fe/t/5829efd0414fb518a2c06557/1479143379620/?format=300w" alt"Easy To Work With" ></li>
				<li>Easy To Work With</li>
			</ul>
		</div>
	</section>