CSS水平對齊方式顯示內嵌跨度

Question

有以下HTML代碼：

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

CSS代碼：

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

我在格對齊跨度垂直，但現在我需要水平對齊跨度。我試圖使用'margin：0 auto'，但它不起作用。請告訴我，我該怎麼辦？謝謝！我需要左對齊的圖像和中心對齊的文本。

Answer 1

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

小提琴：http://jsfiddle.net/r0z75mey/4/

Answer 2

試試這個..

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

Answer 3

嗨，你檢查此鏈接可能有助於您 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> 

如果你來了，是加載圖像中的文字留下，然後使用這個CSS

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

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

Answer 4

我想知道你是否能夠改變你的HTML？如果是，請試試這個：

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

見http://jsfiddle.net/utdwqs1v