Центрирование изображения и текста

Question

Я создаю веб-страницу с 2 <div> s рядом. Каждый <div> будет иметь 2 секции. Я хочу сосредоточить их (довести их до середины <div>). Я пытаюсь сделать это <div> отзывчивым. На веб-сайте 2 <div> s будет находиться в одной строке, а на мобильном - <div> появится на одной строке, а другая <div> появится на второй строке. Я пытаюсь сосредоточить изображение и текст каждого раздела.

Как это сделать?

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

Моя скрипка: https://jsfiddle.net/4okxw32v/

Answer 1

Прежде всего, использование поплавков в макет дизайна не рекомендуется. Как правило, это не очень хороший способ делать вещи, и обычно, если у вас проблема с макетом, она сводится к проблеме с плавающей точкой. Вместо этого вы должны использовать настройку display: inline-block. При использовании встроенного блока необходимо учитывать несколько вещей.

1. Любое пустое пространство между элементами будет показано. Для борьбы с этим вы можете установить font-size: 0 на обертке, а затем установить font-size: 1rem на детей. Это установит размер шрифта в содержимом того же размера, что и размер селектора html.

2. Вы можете предотвратить разрыв линии, если вы установили white-space: nowrap на родителя, а затем установите white-space: initial на детей.

Следующая вместо добавления изображения и плавающей его внутри ребенка вы можете использовать CSS псевдо-элемент :: до (или CSS2: перед) на текстовом контейнере внутри элемента.

Наконец центрировать содержимое использовать text-align: center на материнской

*, *::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>