Centering Image and Text - html

Question

I am creating a web page with 2 <div>s side by side. Each <div> will have 2 sections.
I want to center them (bring them to the middle of the <div>). I am trying to make this <div> responsive. In the website, 2 <div>s will be in one line, while in mobile one <div> will appear on one line and the other <div> will appear on a second line. I am trying to center the image and text of each section.
How can I accomplish that?
.wrapper {
width: 100%;
overflow: hidden;
}
.wrapper div {
min-height: 45px;
padding: 1px;
}
#one {
background-color: gray;
float: left;
width: 50%;
}
#two {
background-color: red;
overflow: hidden;
min-height: 45px;
}
#media screen and (max-width: 400px) {
#one {
float: none;
margin-right: 0;
width: auto;
border: 0;
}
}
<div class="wrapper">
<div id="one">
<img src="http://livebodybuilding.com/images/fast-delivery.png" height="26" width="55" style="float:left; margin-top: 6px;" />
<p style=" font-size:13px; color:#fff; line-height:1.5; font-family: 'Montserrat',sans-serif;"><strong> FREE DELIVERY </strong>ORDERS OVER $100</p>
</div>
<div id="two">
<img src="http://livebodybuilding.com/images/free-gift.png" height="26" width="31" style="float:left; margin-top: 6px;" />
<p style="font-size:13px; color:#fff; line-height:1.5; font-family: 'Montserrat',sans-serif;"><strong> FREE GIFT</strong> ORDERS OVER $100</p>
</div>
</div>
My fiddle: https://jsfiddle.net/4okxw32v/

Answer 1

First of all, the use of floats in layout design is discouraged. It is generally not a good way of doing things, and usually if you're having a layout issue it comes down to a float problem. Instead you should use the display: inline-block setting. When using inline-block there are a couple of things to take into consideration.
Any white space between elements will be shown. To combat this you can set font-size: 0 on the wrapper and then set font-size: 1rem on the children. This will set the font size in the content to the same size as that of the html selector.
You can prevent line-breaking if you set white-space: nowrap on the parent and then set white-space: initial on the children.
Next instead of adding an image and floating it inside the child you can use the css pseudo element ::before (or css2 :before) on the text container inside the element.
Finally to center the contents use text-align: center on the parent
*, *::before, *::after {
box-sizing: border-box;
}
html,
body {
padding: 0px;
margin: 0px;
}
.wrapper {
font-size: 0;
}
.wrapper div {
font-size: 1rem;
min-height: 45px;
padding: 1px;
text-align: center;
font-size: 13px;
color: #fff;
line-height: 1.5;
font-family: 'Montserrat', sans-serif;
overflow: hidden;
display: inline-block;
width: 50%;
}
#one {
background-color: gray;
}
#one p:before {
content: "";
display: inline-block;
width: 4em;
height: 2em;
background-image: url(http://livebodybuilding.com/images/fast-delivery.png);
background-size: cover;
vertical-align: middle;
margin-right: 5px;
}
#two {
background-color: red;
overflow: hidden;
min-height: 45px;
}
#two p:before {
content: "";
display: inline-block;
width: 2.5em;
height: 2em;
background-image: url(http://livebodybuilding.com/images/free-gift.png);
background-size: cover;
vertical-align: middle;
margin-right: 5px;
}
#media screen and (max-width: 620px) {
.wrapper div {
width: 100%;
}
}
<div class="wrapper">
<div id="one">
<p><strong>FREE DELIVERY</strong> ORDERS OVER $100</p>
</div>
<div id="two">
<p><strong>FREE GIFT</strong> ORDERS OVER $100</p>
</div>
</div>