Question

我的图片和文字都带有<li>标记内的链接。 <ul>的样式用于创建图像和内容中的列。

问题：如何将副本置于图像下方并在图像下方添加一个小边距以使其分离？

HTML ：

<ul class="display-posts-listing">
    <li class="listing-item one-fourth first">
        <a class="image" href="http://websitex.com/sept-15-2014/">
        <a class="title" href="http://websitex.com/sept-15-2014/">Sept 15, 2014</a>
    </li>
</ul>

CSS ：

ul.display-posts-listing li img{display:block;margin:0px auto;}
ul.display-posts-listing li a.title{margin:0px auto;font:bold 14px arial;margin-top:30px;color:white;text-decoration:none;}
ul.display-posts-listing li a.title:hover{color:orange;}

Answer 1

为了使文本居中，请尝试使用以下CSS代码。

text-align:center

在图像底部添加边距应该可以为您提供所需的分离。或者，可以使用margin-bottom属性。

margin: 0 0 10px 0;

示例：

ul.display-posts-listing li .img{display:block;margin: 0 0 10px 0;}
ul.display-posts-listing li a.title{margin:0px auto;font:bold 14px arial;margin-top:30px;color:white;text-decoration:none;text-align:center;}

Answer 2

您的HTML和CSS都很奇怪，将其更改为：

<div class="container mainbody">
    <ul class="display-posts-listing">
<li class="listing-item one-fourth first">
    <img class="image" src="http://i.stack.imgur.com/OrkwY.jpg?s=128&g=1" alt="" />
<a class="title" href="http://websitex.com/sept-15-2014/">Sept 15, 2014</a>
</li>
</ul>

和CSS就是这样：

ul{width:200px;}
ul{width:200px; text-align:center; list-style-type:none}
li img{display:block;margin:0px auto; margin-bottom:20px;}
ul li a{margin:0px auto;font:bold 14px arial;margin-top:30px;color:#f00;text-decoration:none;}
ul.display-posts-listing li a.title:hover{color:orange;}

See fiddle here

Answer 3

我注意到你使用

<a class="image" href="http://websitex.com/sept-15-2014/">

这样我认为你的css代码应该是a.image

ul.display-posts-listing li a.image{display:block;margin:0px auto;}

或同时,,使用<li>和文字position:relative制作大position:absolute;

你可以通过ex：top:10px;right:10px;和其他方

来控制它的位置

<li>标记</li>中的中心链接文字

3 个答案: