居中圖像和文字

Question

我正在創建一個網頁，並排放置2個<div>。每個<div>將有2個部分。 我想將它們居中（將它們帶到<div>的中間）。我正試圖使這個<div>響應。在網站中，2個<div>將在一行中，而在移動中，一個<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>