我正在尝试创建一个模仿链接中的设置的设置,其中图像,文本和边框都是水平和垂直居中的。我尝试了很多不同的想法。
以下是我得到的最接近但是即便如此,我仍然遇到边框显示问题,而且事情没有按照我想要的方式集中。
<div style="max-width: 800px; height border: 1px solid #c6c6c6; border-radius: 5px; padding: 35px; margin-left: 60px; float: center; height: 220px; display: inline-block;">
<a href="www.google.com" target="_blank"><img src="image.gif" /></a>
</div>
<div style="height: 220px; display: inline-block;">
<div style="position: relative; top: 50%;">
<h4 style="text-align: center;">Text 1/h4>
<p style="text-align: center;">Text 2<br />Text 3</p>
</div>
</div>
答案 0 :(得分:1)
我会尝试使用CSS表,将图像和文本放在使用display: table-cell
的单独块级元素中,所有这些元素都使用display: table
包含在父容器中。
.wrapper {
border: 1px solid gray;
border-radius: 5px;
display: table;
height: 220px;
margin: 0 auto;
}
.wrapper .item {
display: table-cell;
vertical-align: middle;
text-align: center;
min-width: 200px;
padding: 35px;
}
.item img {
display: block;
}
<div class="wrapper">
<div class="item">
<a href="www.google.com" target="_blank">
<img src="http://placehold.it/200x150" />
</a>
</div>
<div class="item">
<h4>Text Line One</h4>
<p>Text 2
<br />Text 3</p>
</div>
</div>
答案 1 :(得分:0)
你应该将inline-block
放在图片上,文本面板的父div和vertical-align:middle
..会这样做
.textpane{
height: 220px;
display: inline-block;
vertical-align:middle;
}
.imagepane{
width:50px;
height:50px;
display:inline-block;
vertical-align:middle;
max-width: 800px;
border: 1px solid #c6c6c6;
border-radius: 5px;
padding: 35px;
margin-left: 60px;
height: 220px;
}
<div class='imagepane'>
<a href="www.google.com" target="_blank"><img src="image.gif" /></a>
</div>
<div class='textpane'>
<div style="position: relative; top: 50%;">
<h4 style="text-align: center;">Text 1/h4>
<p style="text-align: center;">Text 2<br />Text 3</p>
</div>
</div>
注意强>
没有float:center
;