[英]Image and Text Positioning HTML
我正在嘗試創建一個設置,模仿鏈接中的設置,圖像、文本和邊框都水平和垂直居中。 我嘗試了許多不同的想法。
下面是我得到的最接近的,但即便如此,我仍然遇到邊框顯示問題,並且東西沒有按照我想要的方式居中。
<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>
我會嘗試使用 CSS 表,將圖像和文本放在使用display: table-cell
單獨塊級元素中,所有這些都包含在使用display: table
的父容器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>
你應該把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
類的東西;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.