Matthew Hegarty Matthew Hegarty -4 years ago 89
CSS Question

Incorrect text indentation following floating image tag

I am trying to create a simple box with a centralised image, followed by a heading and text. Like this:

example



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

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





I can achieve this applying a float to the image, but then the following text is incorrectly indented (it should be centered in the image).

enter image description here

It should be simple but I cannot figure out how to get the heading centered correctly.

How can I fix this issue, or am I going about it in the wrong way?

JS Fiddle

Answer Source

Instead of floating and relative positioning, you can use absolute positioning:

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download