Centering image and text

I am creating a webpage with 2 <div>

row. Each <div>

will have 2 sections. I want to focus them (bring them to the middle <div>

). I am trying to make this <div>

responsive. On website 2 <div>

will appear on one line, while on mobile one <div>

will appear on one line and the other <div>

will appear on the second line. I am trying to center the image and text of each section.

How can i do this?

.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>&nbsp;&nbsp;&nbsp;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>&nbsp;&nbsp;&nbsp;FREE GIFT</strong> ORDERS OVER $100</p>
  </div>
</div>
      

Run codeHide result


My fiddle: https://jsfiddle.net/4okxw32v/

+3


source to share


1 answer


First of all , the use of floats in layout design is not recommended. This is generally not a very good way of doing things, and usually if you have a layout problem it boils down to a float problem. You should use a parameter instead display: inline-block

. There are a few things to keep in mind when using inline block.

  • Any white space between items 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 the html selector size.

  • You can prevent line breaks if you set white-space: nowrap

    in parent and then set white-space: initial

    for children.

Further, instead of adding an image and floating it inside the child element, you can use the css :: before (or css2: before) pseudo-element in a text container inside the element.



Finally , to center the content, use text-align: center

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

Run codeHide result


+1


source







All Articles