试图将文字放在图片下会弄乱对齐方式

Question

我正在尝试让文本在连续 3 个图像下对齐。我在这里找到的每个解决方案最终都会将图像放在与水平相反的垂直线上。

HTML：

<div id="SecondFooter" class="responsiveColumn">
            <a href="link here" target="_blank"><img src="img.jpg"></a>
            <a href="link here" target="_blank"><img src="img.jpg"></a>
            <a href="link here" target="_blank"><img src="img.jpg"></a>
</div> 

CSS：

#SecondFooter {
    width: 600px;
    background-color: #ffffff; 
    color: #000000; 
    font-family: arial,helvetica,sans-serif; 
    font-size: 11px;
    text-align: center;
}

#SecondFooter img{
    display: inline-block;
    width: 155px;
    height: 155px;
    padding: 5px;
    margin: 0;
}

我试过做一个图和图题。尝试将每个图像分离到它自己的 div 中，但它看起来就像我现在改变的任何东西，把所有东西都放在垂直对齐中，我试图让它保持水平。

Answer 1

如何创建一个主 div 并将所有其他图像 div 放入其中？类似的东西

<div> 
   <div>
      <img>
      <p>
   </div>
   <div>
      <img>
      <p>
   </div>
   <div>
      <img>
      <p>
   </div>
</div>

也许它会起作用。

Answer 2

我想这就是你要找的东西？其他 CSS 仅用于视觉效果。

  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;

http://flexboxfroggy.com/ 是展示使用 flex 可以实现什么的绝佳实践。

https://codepen.io/garynorris88/pen/owQpvN?editors=1100

Answer 3

你需要修复的几件事

1 - 关闭你的图片标签

2 - 图像的宽度和高度需要一个单位（例如 px）。 155需要155px

https://jsfiddle.net/eg5a4pjg/1/

HTML

<a href="link here" target="_blank"><img src="img.jpg" /></a>

CSS

#SecondFooter img{
    display: inline-block;
    width: 155px;
    height: 155px;
    padding: 5px;
    margin: 0;
}

Answer 4

您所要做的就是像这样将您的 #SecondFooter div 中的锚标记浮动到左侧

#SecondFooter a {
  float: left;
}

这就是您的 HTML 的外观。我在img标签之后添加了一个p标签，并带有一些文本来演示

<div id="SecondFooter" class="responsiveColumn">
  <a href="link here" target="_blank">
    <img src="img.jpg">
    <p>hi there</p>
  </a>
  <a href="link here" target="_blank">
    <img src="img.jpg">
    <p>hi there</p>
  </a>
  <a href="link here" target="_blank">
    <img src="img.jpg">
    <p>hi there</p>
  </a> </div>

为了保持相对居中，我添加了一些包装器

HTML：

<div id="SecondFooter" class="responsiveColumn">
  <div class="wrapper">
    <div class="link-wrapper">
      <a href="link here" target="_blank">
        <img src="img.jpg">
        <p>hi there</p>
      </a>
      <a href="link here" target="_blank">
        <img src="img.jpg">
        <p>hi there</p>
      </a>
      <a href="link here" target="_blank">
        <img src="img.jpg">
        <p>hi there</p>
      </a>
    </div>
  </div>
</div>

CSS: 我把 SecondFooter 的宽度改成了 width: 100%;

#SecondFooter {
  width: 100%;
  background-color: #ffffff; 
  color: #000000; 
  font-family: arial,helvetica,sans-serif; 
  font-size: 11px;
  text-align: center;

}

.wrapper {
  width: 90%;
  margin: 0 auto;
}

.link-wrapper {
  width: 60%;
  margin: 0 auto;
}