居中對齊文本和圖像水平文本長度可以變化

Question

我有一個div其中我必須放置一個圖標和一些文本的權利，並安排整個事情，使他們一起保持居中對齊（圖像和文字之間有一個小小的差距）。問題是，文本長度可能會有所不同。因此，如果它是一個簡短的文字，如利比亞，整個元素將蜷縮在中心附近，而如果它是一個像波斯尼亞和Herzigovina大文本，它會散開（雖然仍居中），圖像點動關閉向左。我嘗試這樣做：

<div class='container'> 
    <div class='imagetext'> 
    <img class='location-icon' src="http://images.clipartpanda.com/blue-location-icon-Location-Icon-Blue.png" /> 
    <span class='location-text'> 
     Bosnia and Herzigovina 
    </span> 
    </div> 
</div> 

而且CSS：

.container { 
    width: 260px; 
    height: 298px; 
    background: yellow; 
} 

.imagetext { 
    width: 100%; 
    height: 20px; 
    background: green; 
    position: relative; 
    top: 50px; 
    text-align: center; 
} 

.location-icon { 
    width: 20px; 
    display: inline-block; 
    margin-right: 5px; 
    float: left; 
} 

.location-text { 
    font-size: 12px; 
    display: inline-block; 
    float: left; 
    position: relative; 
    top: 5px; 
} 

body { 
    background: white; 
    font-family: sans-serif; 
} 

這是小提琴 - https://jsfiddle.net/d8t9e0p6/3/。即使text-align設置爲center，我也無法居中。我如何實現正確的中心對齊？

Answer 1

我更新了它https://jsfiddle.net/d8t9e0p6/4/

你不得不把文本對齊中心的容器， ，需要寬自和顯示inline-block的的imagetext容器上;

.container { 
    width: 260px; 
    height: 298px; 
    background: yellow; 
    text-align:center; 
} 

.imagetext { 
    width:auto; 
    height: 20px; 
    background: green; 
    position: relative; 
    top: 50px; 
    text-align: center; 
    display:inline-block; 
} 

Answer 2

刪除float:left css語句。

Answer 3

首先，正如JoostS所說，擺脫你的float:left s 然後，你會有一個錯位的文本字符串。爲了解決這個問題擺脫top:5px;頂部的.location_text，並添加vertical-align:middle到.location-icon

.container { 
 
    width: 260px; 
 
    height: 298px; 
 
    background: yellow; 
 
} 
 

 
.imagetext { 
 
    width: 100%; 
 
    height: 20px; 
 
    background: green; 
 
    position: relative; 
 
    top: 50px; 
 
    text-align: center; 
 
} 
 

 
.location-icon { 
 
    vertical-align:middle; 
 
    width: 20px; 
 
    display: inline-block; 
 
    margin-right: 5px; 
 
} 
 

 
.location-text { 
 
    font-size: 12px; 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
body { 
 
    background: white; 
 
    font-family: sans-serif; 
 
}

<div class='container'> 
 
    <div class='imagetext'> 
 
    <img class='location-icon' src="http://images.clipartpanda.com/blue-location-icon-Location-Icon-Blue.png" /> 
 
    <span class='location-text'> 
 
     Bosnia and Herzigovina 
 
    </span> 
 
    </div> 
 
</div>

更新添加：

您也可以大幅如果你減少你的標記使用僞元素：

.container { 
 
    width: 260px; 
 
    height: 298px; 
 
    background: yellow; 
 
} 
 

 
.imagetext { 
 
    width: 100%; 
 
    height: 20px; 
 
    background: green; 
 
    position: relative; 
 
    top: 50px; 
 
    text-align: center; 
 
    font-size: 12px; 
 
} 
 

 
.imagetext::before{ 
 
    display:inline-block; 
 
    content:''; 
 
    background-image:url(http://images.clipartpanda.com/blue-location-icon-Location-Icon-Blue.png); 
 
    background-size:contain; 
 
    width:20px; 
 
    height:20px; 
 
    background-repeat:no-repeat; 
 
    vertical-align:middle; 
 
    margin-right:5px; 
 
} 
 

 
body { 
 
    background: white; 
 
    font-family: sans-serif; 
 
}

<div class='container'> 
 
    <div class='imagetext'> 
 
    Bosnia and Herzigovina 
 
    </div> 
 
</div>