Question

我创建了一个包含三个文本链接的div，我将它们放在三个相同大小的相邻图像上方。我需要将每段文字都放在相应的图像上方。

这是我的div：

#catalogs ul {
  text-align: justify;
}

#catalogs ul:after {
  content: '';
  display: inline-block;
  width: 100%;
}

#catalogs ul:before {
  content: '';
  display: block;
  margin-top: -0.75em;
}

#catalogs li {
  display: inline-block;
  margin-right: 1.75em;
  position: relative;
  top: 1.25em;
  font-size: 100%;
}

<div id="catalogs">
  <ul>
    <li><span style="text-decoration: underline; color: #0b5394;"><a 
    href="http://www.kerussosales.com/kerusso-spring-2017" target="_blank" 
    rel="noopener noreferrer">Spring 2017</a></span></li>
    <li><span style="text-decoration: underline; color: #0b5394;"><a 
    href="http://www.kerussosales.com/kerusso-summer-2017-catalog" 
    target="_blank" rel="noopener noreferrer">Summer 2017</a></span></li>
    <li><strong>Fall 2017 - available August 1st</strong></li>
  </ul>
</div>

以下是使用上述代码的页面当前的样子： page image

任何人都可以帮我修改上面的CSS，以便每个文本链接完全位于其各自的图像上方吗？

Answer 1

我会将每个图像和文本包装在一个单独的DIV框中 - 然后只使用text-align：center来居中文本。这应该有效！

我不知道如果我会使用列表项目。也许是标题标签，如h3或段落标签。看看下面我的笔，看看我的意思= D（我在这里添加了内联样式以添加说明我希望。我更喜欢我的codepen例子，它更清洁）

https://codepen.io/celtninja/pen/RgBzOZ

<div id="one" style="float: left; margin: 5px;">
     <p style="text-align: center;">Image Heading</p>
     <img  style="text-align: center;" 
     src="https://placeholdit.co//i/350x350?">
</div>

将文本链接在三个相邻图像上方

1 个答案: