Question

表示每个图像的文本当前位于图像的右侧。我希望文本在相应的图像下面居中，我该如何实现呢？

请注意，我在列表项上应用了display: inline-bock，因此它们排成一行。

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 1

通过执行此操作，我无需对现有HTML进行任何更改即可执行此操作：

li{
  display:inline-block;
  text-align:center;
  width:70px;
}

li img{
  margin:0 10px;
}

text-align将li中的所有text和child元素居中。宽度需要足够大，以至于没有标题太大而不适合该宽度。（如果标题不符合分配的宽度，那么定心就会被破坏。）

我在图片中添加了左边距和右边距以进行一些未来验证，以防您以后想要在列表中包含非常短的标题。有了这个余量，即使非常短的标题也会被强制到下一行（而不是图像的旁边），因为每侧50 px图像宽度+10边距不会留下文字空间。

Answer 2

编辑浮动，如果不适合页面，则保持这些内联和溢出。

＆＃13;

<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>

＆＃13;

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;
}

DEMO

中心文本连续下方的图像

3 个答案: