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的宽度更改为宽度：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;
}

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

4 个答案: