html - 图像和文本定位 HTML

Question

我正在尝试创建一个模仿链接中的设置，图像、文本和边框都水平和垂直居中。我尝试了很多不同的想法。

下面是我得到的最接近的，但即便如此，我仍然遇到边框显示的问题，而且事情没有按照我想要的方式居中。

<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>

Answer 1

我会尝试使用 CSS 表格，将图像和文本放在使用 display: table-cell 的单独 block 级元素中，所有这些元素都包含在使用 display 的父容器中: 表。

.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>