浮动图像标记后的文本缩进不正确

Question

我正在尝试创建一个带有集中图像的简单框，然后是标题和文本。像这样：

＆＃13;

＆＃13;

.service-box {
  height: 240px;
  width: 360px;
  margin-top: 28px;
  text-align: center;
}

img {
  float: left;
  position: relative;
  top: -56px;
  left: 124px;
}

.service-box-text {
  border: solid 1px hotpink;
  border-radius: 6px;
  height: 182px;
  padding: 80px 32px 32px 32px;
}

＆＃13;

<div class="service-box">
  <img src="http://placehold.it/112x112">
  <div class="service-box-text">
    <h5>HEADING</h5>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我可以实现这一点，将浮动应用于图像，但随后的文本缩进不正确（它应该在图像中居中）。

应该很简单，但我无法弄清楚如何正确居中。

我如何解决这个问题，或者我是以错误的方式解决这个问题？

JS Fiddle

Answer 1

您可以使用绝对定位：

，而不是浮动和相对定位

.service-box {
  height: 240px;
  width: 360px;
  margin-top: 28px;
  text-align: center;
}

img {
  position: absolute;
  transform: translate(-50%,-50%);
}

.service-box-text {
  border: solid 1px hotpink;
  border-radius: 6px;
  height: 182px;
  padding: 80px 32px 32px 32px;
}

<div class="service-box">
  <img src="http://placehold.it/112x112">
  <div class="service-box-text">
    <h5>HEADING</h5>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing</p>
  </div>
</div>

Answer 2

可以在单个容器中使用flexbox。

＆＃13;

＆＃13;

.service-box{
  border: 1px solid black;
  border-radius: 5px;
  width: 300px;
  display:flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.service-box img{
  transform: translateY(-50px) rotate(45deg);
  border-radius: 10px;
  width: 100%
  max-width: 112px;
}
.service-box h5{
  margin: 0;
}

＆＃13;

<div class="service-box">
   <img src="http://placehold.it/112x112">
   <h5>HEADING</h5>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您需要在下一个元素上清除浮动。一旦你这样做，它就可以正常工作。

 .service-box-text {
    border: solid 1px hotpink;
    border-radius: 6px;
    height: 182px;
    padding: 80px 32px 32px 32px;
    clear: left;
  }

https://jsfiddle.net/x76v0a8k/3/

绝对定位也可以，但在响应式页面上使用并不总是那么容易。