CODEWITHSUNDEEP
htmlcss
malcoauri
malcoauri

Reputation: 12189

CSS horizontal alignment display-inline span

There is the following HTML code:

<div class="preloader">
  <img src="img/preloader.gif">
  <span>
    <strong>Получение адреса...</strong>
  </span>
</div>

CSS code:

.preloader span {
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
}

I align span in div vertically, but now I need to align span horizontally. I've tried to use 'margin: 0 auto', but it doesn't work. Please tell me, how can I do it? Thanks! I need image with left alignment and text with center alignment as a result.

Upvotes: 4

Views: 4616

Answers (4)

Ionut Necula
Ionut Necula

Reputation: 11472

Use text-align: center;:

.preloader {
  text-align: center;
}

.preloader img {
  float: left;
}

.preloader span {
  line-height: 64px;
}
<div class="preloader">
  <img src="http://orig14.deviantart.net/f682/f/2010/331/4/e/darth_vader_icon_64x64_by_geo_almighty-d33pmvd.png">
  <span>
    <strong>Получение адреса...</strong>
  </span>
</div>

Fiddle: http://jsfiddle.net/r0z75mey/4/

Upvotes: 8

Duc Le
Duc Le

Reputation: 357

I wonder if you are able to change your html? If yes, please try this:

HTML:

<div class="preloader">
  <div class="wrapper">
    <img src="https://cdn4.iconfinder.com/data/icons/geomicons/32/672395-loading-32.png">
  </div>
  <span>
    <strong>Получение адреса...</strong>
  </span>
</div>

CSS:

.preloader {
  text-align: center;
  line-height: 64px;
}
.wrapper {
  float: left;
  display: inline-block;
}
img {
  vertical-align: middle;
}

See http://jsfiddle.net/utdwqs1v

Upvotes: 0

Allen
Allen

Reputation: 304

Hi you check this link may be helpful for you http://jsfiddle.net/allenktpr80/tq0ta3gs/

<div class="preloader">
  <img src="http://www.ajaxload.info/images/exemples/21.gif">
  <span>
    <strong>Please wait while its loading</strong>
  </span>
</div>

If you that loader image to come in left of text then use this css 

.preloader img {
  float: none;
  position: relative;
  top: 10px;
}

http://jsfiddle.net/allenktpr80/qvxe7jo4/

Upvotes: 0

Amit singh
Amit singh

Reputation: 2036

Try this..

.preloader span {
  display: inline;
  vertical-align: middle;
  margin: 0 auto;
}
.preloader {
  text-align: center;
}
.preloader img {
  float: left;
}
<div class="preloader">
  <img src="img/preloader.gif">
  <span>
    <strong>Получение адреса...</strong>
  </span>
</div>

Upvotes: 0

Related Questions