将文字链接居中放置在三个相邻图像上方

KVee 发表于 Dev

KVee

我创建了一个包含三个文本链接的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>

使用上面的代码，页面的当前外观如下：页面图像

谁能帮我修改上述CSS，以使每个文本链接都位于其相应图像上方的完美中心位置？

忍者神龟

我将每个图像和文本包装在单独的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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。