Question

我希望能够将我的文字对齐，使其在无序列表中位于图像上方。

<ul class="items">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
</ul>

<ul class="itemImages">
    <li><img src="img1.jpg"></li>
    <li><img src="img1.jpg"></li>
    <li><img src="img1.jpg"></li>
</ul>

到目前为止我的css样式是：

.items > li {
    display: inline-block;
    padding: 0 30px 0 30px;
}

.itemImages > li {
    display: inline-block;
    padding: 0 30px 0 30px;
}

这种样式并不完全正确，因为如果我将窗口调整到特定点，则图像不会直接位于相应文本的下方。当窗口大小缩小时，我最终得到的文本在彼此之下，然后是图像。不管窗口大小调整，我应该怎么做才能将图像直接放在它的相应文本下面？

Answer 1

如果将它们包装在另一个元素中，则可以使用display: table属性。

.parent {
  display: table;
}
.parent > ul {
  display: table-row;
}
.parent > ul > li {
  display: table-cell;
  padding: 0 30px 0 30px;
}
img {
  max-width: 100px;
}

<div class="parent">
  <ul class="items">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
  </ul>
  <ul class="itemImages">
    <li><img src="http://weknowyourdreams.com/images/monkey/monkey-04.jpg"></li>
    <li><img src="http://weknowyourdreams.com/images/monkey/monkey-04.jpg"></li>
    <li><img src="http://weknowyourdreams.com/images/monkey/monkey-04.jpg"></li>
  </ul>
</div>

但是如果你可以将文本和图像放在同一个元素中，那就是你应该做的，而不是有2个列表。

li {
  display: inline-block;
  padding: 0 30px;
  text-align: center;
}
img {
  display: block;
  max-width: 100px;
}

<ul>
    <li>item1<img src="http://weknowyourdreams.com/images/monkey/monkey-04.jpg"></li>
    <li>item2<img src="http://weknowyourdreams.com/images/monkey/monkey-04.jpg"></li>
    <li>item3<img src="http://weknowyourdreams.com/images/monkey/monkey-04.jpg"></li>
</ul>

css / html在无序列表中对齐图像上方的文本

1 个答案: