Reputation: 5203
I have a div
within which I have to place an icon and some text to the right of it, and arrange the entire thing such that both of them together remain center aligned (there is a small gap between the image and text). Problem is, the text length can vary. So if it is a short text like Libya, the entire element will huddle close to the center, while if it is a big text like Bosnia and Herzigovina, it will spread out (while still centered), the image inching close towards the left. I tried this:
<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>
And the 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;
}
This is the fiddle - https://jsfiddle.net/d8t9e0p6/3/. I am unable to center it even with text-align
set to center
. How do I achieve the correct center alignment?
Upvotes: 0
Views: 2201
Reputation: 5115
First, as JoostS said, get rid of your float:left
s
Then, you will have a misaligned text string. To fix this get rid of the top:5px;
top on the .location_text and add vertical-align:middle
to .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>
Updated to add :
You can also drastically reduce your markup if you use a pseudo element:
.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>
Upvotes: 2
Reputation: 1630
I updated it https://jsfiddle.net/d8t9e0p6/4/
you had to put text-align center on the container, and the imagetext container needed width auto and display inline-block;
.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;
}
Upvotes: 1