NedStarkOfWinterfell
NedStarkOfWinterfell

Reputation: 5203

Center align text and image horizontally where text length can vary

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

Answers (3)

Mr. Hugo
Mr. Hugo

Reputation: 12590

Remove the float:left css statements.

Upvotes: 1

trex005
trex005

Reputation: 5115

First, as JoostS said, get rid of your float:lefts 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

Medda86
Medda86

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

Related Questions