Text und Bild horizontal zentrieren, wo die Textlänge variieren kann

Question

Ich habe eine div innerhalb der ich ein Icon und etwas Text rechts davon platzieren muss, und das Ganze so arrangieren, dass beide zusammen zentriert bleiben (Zwischen Bild und Text besteht eine kleine Lücke. Problem ist, die Textlänge kann variieren. Also, wenn es ein kurzer Text wie Libyen ist, wird das gesamte Element in der Nähe der Mitte huddle, während wenn es ein großer Text wie Bosnien und Herzigovina ist, wird es ausgebreitet (während noch zentriert), das Bild Inching in der Nähe nach links. Ich habe versucht, dieses:

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

Und die 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; 
} 

Dies ist die Geige ist - https://jsfiddle.net/d8t9e0p6/3/. Ich kann es nicht zentrieren, selbst wenn text-align auf center eingestellt ist. Wie erreiche ich die korrekte Mittenausrichtung?

Answer 1

ich es aktualisiert https://jsfiddle.net/d8t9e0p6/4/

Sie text-align Zentrum auf dem Behälter, und der Bildtext Container benötigt Breite Auto und Anzeige inline-block setzen musste;

.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

Entfernen Sie die float:left CSS-Anweisungen.

Answer 3

Zuerst, wie JoostS sagte, loswerden Sie Ihre float:left s Dann haben Sie eine falsch ausgerichtete Textzeichenfolge. Um dies zu beheben loszuwerden, die top:5px; oben auf dem .location_text und fügen vertical-align:middle zu .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>

Aktualisiert hinzufügen:

können Sie auch Ihr Markup drastisch reduzieren, wenn Sie Verwende ein Pseudoelement:

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