将文本置于一行图像的下方

Question

表示每个图像的文本当前位于图像的右侧。我想要文本居中下方的相应图像，我怎么做到这一点?

请注意，我在列表项上应用了display: inline-bock，所以它们在一行中。

#footer1 {
  float: left;
  width: 100%;
  border: 10px solid #e3e3e3;
}
#footer1>ul>li {
  padding: 0 8px;
  display: inline-block;
}
#footer1 a:hover img {
  border: 1px solid #5cadff;
  text-decoration: none;
  box-shadow: 5px 5px 2px 2px #5cadff;
}
#footer1 img {
  border: 1px solid transparent;
  margin-left: 110px;
}

<div id="footer1">
  <h2> SOURCES </h2>
  <ul>
    <li>
      <a href="https://www.wikipedea.com" title="wikipedia">
        <img height="50" src="http://www.placehold.it/50" width="50">
      </a>
      w
    </li>
    <li>
      <a href="https://www.google.com" title="google">
        <img height="50" src="http://www.placehold.it/50" width="50">
      </a>
      Google
    </li>
    <li>
      <a href="https://www.youtube.com" title="youtube">
        <img height="50" src="http://www.placehold.it/50" width="50">
      </a>
      Youtube
    </li>
    <li>
      <a href="https://www.nlm.nih.gov/" title="Nih.gov">
        <img height="50" src="http://www.placehold.it/50" width="50">
      </a>
      Nih
    </li>
    <li>
      <a href="https://www.medindia.net" title="MedIndia.net">
        <img height="50" src="http://www.placehold.it/50" width="50">
      </a>
      MedIndia
    </li>
  </ul>
</div>

Answer 1

我能够做到这一点，而不改变你现有的HTML通过这样做:

li{
  display:inline-block;
  text-align:center;
  width:70px;
}
li img{
  margin:0 10px;
}

text-align将li中的所有文本和子元素居中。宽度需要足够大，没有标题会太大而无法适应该宽度。(如果标题不适合分配的宽度，那么居中将被破坏。)

我为图片添加了左右边距，以防你以后想在列表中包含一个非常短的标题。有了这个边距，即使是很短的标题也会被强制放到下一行(而不是图像旁边)，因为50像素的图像宽度+每边10的边距没有留下文字的空间。

Answer 2

编辑为float，保持内联，如果不适合页面则溢出。

<style>
  .container {
    clear: both;
  }
  ul li {
    width: 50px;
    float: left;
    text-align: center
  }
  ul li a {
    text-decoration: none;
  }
</style>
<div class="container">
  <ul>
    <li>
      <a title="wikipedia" href="https://www.wikipedea.com">
        <img src="wikipedia.png" height="50" width="50">wikipedia
      </a>
    </li>
    <li>
      <a title="wikipedia" href="https://www.wikipedea.com">
        <img src="wikipedia.png" height="50" width="50">wikipedia
      </a>
    </li>
    <li>
      <a title="wikipedia" href="https://www.wikipedea.com">
        <img src="wikipedia.png" height="50" width="50">wikipedia
      </a>
    </li>
  </ul>
</div>

Answer 3

请试试这个

HTML:

 <div id="footer1">
        <h2> SOURCES </h2>
        <div class="item">
            <a title="wikipedia" href="https://www.wikipedea.com">
                <img src=""/>
            </a>
            <span class="caption">Text below the image</span>
        </div>
        <div class="item">
            <a title="wikipedia" href="https://www.wikipedea.com">
                <img src=""/>
            </a>
            <span class="caption">Text below the image</span>
        </div>
        <div class="item">
            <a title="wikipedia" href="https://www.wikipedea.com">
                <img src=""/>
            </a>
            <span class="caption">Text below the image</span>
        </div>
    </div>

CSS:

div.item {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 120px;
}
img {
    width: 100px;
    height: 100px;
    background-color: grey;
}
.caption {
    display: block;
}

演示