Question

所以我有一个可能相对简单的问题，但我还没能解决。

在我的网站上，我有一个公司徽标，如果你为组织目的添加任何其他div，则会破坏div（因为第一个div用于css动画并且在其中添加任何其他div会导致某些问题原因），这阻止我将第二行的徽标居中放在第一行下面。我已被警告过关于发布已删除的链接。这是相关的代码（我希望它完整）：

  <ul id="da-thumbs" class="da-thumbs">
        <li>
          <a href="#">
            <img src="x" />
            <div><span>Account Management and Product Intern</span></div>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="x" />
            <div><span>Advisory Board Member</span></div>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="x" />
            <div><span>Biz. Intelligence and Web Specialist</span></div>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="x" />
            <div><span>Marketing Manager</span></div>
          </a>
        </li>
        <li>  
          <a href="#">
            <img src="x" />
            <div><span>Marketing Consultant</span></div>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="x" />
            <div><span>Product Manager/Developer</span></div>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="X" />
            <div><span>Tech+Data Lead/Advisor</span></div>
          </a>
        </li>
      </ul>

由于容器和图像的大小，这些元素在第一行显示为3，在第二行显示为4。有没有人有这方面的解决方案？我尝试将它们转换为内联块元素或添加边距，但如果没有为第二行的4个元素指定新的div，则没有任何效果。

提前致谢！

*编辑：已删除链接，抱歉。

Answer 1

这是你在找什么？

ul{text-align:center;}
li{display:inline-block;}

jsfiddle：http://jsfiddle.net/UpG5M/

Answer 2

您可能会尝试使用：nth-of CSS伪类来定位有问题的徽标。

http://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type

将一堆<li>的第二行居中而不添加div？</li>

2 个答案: