我在 p 标记和链接中有一个图像和一些文本,要垂直对齐。当我 float 图像时效果很好。但是当我在 p 标记和链接中使用左侧填充时,它无法完美地获得填充。
click here to see the image I need look like
here is a fiddle
.wrapper {
font-family: sans-serif;
width: 400px;
margin-top: 30px;
margin-bottom: 30px;
clear:both
}
img {
float: left;
}
p.text {
padding-left: 30px;
display: block;
padding-bottom: 22px;
color: #222222;
}
a.link {
text-decoration: none;
padding-left: 30px;
text-transform: uppercase;
line-height: 22px;
color: #777777;
}
a.date {
color: #e10622;
text-decoration: none;
}
<div class="wrapper">
<img src="https://placehold.it/100x100" alt="">
<p class="text">Posted By: Simon | <a href="#" class="date"> 26 July 2016</a></p>
<a href="#" class="link">Days are all happiness is key
and Free</a>
</div>
<div class="wrapper">
<img src="https://placehold.it/100x100" alt="">
<p class="text">Posted By: Simon | <a href="#" class="date"> 26 July 2016</a></p>
<a href="#" class="link">Days are all happiness is key
and Free</a>
</div>
<div class="wrapper">
<img src="https://placehold.it/100x100" alt="">
<p class="text">Posted By: Simon | <a href="#" class="date"> 26 July 2016</a></p>
<a href="#" class="link">Days are all happiness is key
and Free</a>
</div>
<br>
<br>
<br>
<a href="http://prntscr.com/cpusej" style="text-align:center; display: block; padding: 10px; background: #f44; font-size: 18px">Please see here what I need</a>
提前致谢。 :)
最佳答案
您需要将 display: block;
添加到您的 a.link
类样式中。另外,在图像上设置 margin-right: 30px;
,并从 p.text
中删除 padding-left: 30px;
样式, a.link
元素。最终 CSS 如下:
.wrapper {
font-family: sans-serif;
width: 400px;
margin-top: 30px;
margin-bottom: 30px;
}
img {
float: left;
margin-right: 30px;
}
p.text {
display: block;
padding-bottom: 22px;
color: #222222;
}
a.link {
text-decoration: none;
text-transform: uppercase;
line-height: 22px;
color: #777777;
display: block;
}
关于html - 图像和多行文本以及链接垂直对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39862126/