如何在居中文本和正確背景的div中浮動圖像

Question

這是我的標題欄當前的樣子： https : //i.imgur.com/Hx67zu6.png

但是，我希望文本水平居中，並將圖像一直向左移。

當我嘗試在圖片的CSS中添加float：時，它完全把它弄亂了，就像這樣： https : //i.imgur.com/UtLC3xk.png

如您所見，標題沒有水平或垂直對齊，並且條形圖也沒有拉伸以容納圖像。

HTML：

<div class="EA-header-bar">
    <img src="~/Images/EA Icons/YoungDriver_white.png" class="EA-header-image" />
    <p class="EA-header-text">
        <b>YOUNG DRIVERS</b>
    </p>
</div>

CSS：

.EA-header-bar {
    background-color: rgb(206,33,39);
    text-align: center;
}

.EA-header-image {
    margin: 1%;
    margin-left: 3%;
    height:150px;
    float: left;
}

.EA-header-text {
    text-align: center;
    color: white;
    font-size: 6vmin;
    display: inline-block;
    vertical-align: middle;
    font: bolder;
    font-family: kalinga;
}

Answer 1

在進行此類定位工作時，嘗試使用flexbox，編碼既快速又精巧。 還可以將<img> ， <p>或相關的內聯標簽之類的標簽放在<div>只是為了看起來更專業，但這些只是建議，總會尋找改善CSS的方法。

 .EA-header-bar { display: flex; background-color: rgb(206,33,39); text-align: center; justify-content: center; align-items: center; } .EA-col-img { padding-left: 20px; } .EA-col-txt { flex:1 } .EA-header-image { height:150px; } .EA-header-text { color: white; font-size: 6vmin; font: bolder; font-family: kalinga; } 

 <div class="EA-header-bar"> <div class="EA-col-img"> <img src="https://image.flaticon.com/icons/svg/75/75804.svg" class="EA-header-image" /> </div> <div class="EA-col-txt"> <p class="EA-header-text"> <b>YOUNG DRIVERS</b> </p> </div> </div> 

使用絕對定位的另一個示例

我認為這更適合您的需求

 .EA-header-bar { position: relative; display: flex; background-color: rgb(206,33,39); text-align: center; justify-content: center; align-items: center; } .EA-col-img { position: absolute; left: 5vw; } .EA-col-txt { flex:1 } .EA-header-image { height:20vh; } .EA-header-text { color: white; font-size: 6vmin; font: bolder; font-family: kalinga; } 

 <div class="EA-header-bar"> <div class="EA-col-img"> <img src="https://image.flaticon.com/icons/svg/75/75804.svg" class="EA-header-image" /> </div> <div class="EA-col-txt"> <p class="EA-header-text"> <b>YOUNG DRIVERS</b> </p> </div> </div>