html – CSS水平对齐显示 – 内联跨度

html – CSS水平对齐显示 – 内联跨度,第1张

概述有以下 HTML代码: <div class="preloader"> <img src="img/preloader.gif"> <span> <strong>Получение адреса...</strong> </span></div> CSS代码: .preloader span { display: inline-block; vertical-alig 有以下 HTML代码:

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

CSS代码:

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

我垂直对齐div中的span,但现在我需要水平对齐span.我试过使用’margin:0 auto’,但它不起作用.请告诉我,我该怎么办?谢谢!我需要具有左对齐的图像和具有中心对齐的文本作为结果.

@H_403_22@解决方法 使用text-align:center;:

.preloader {  text-align: center;}.preloader img {  float: left;}.preloader span {  line-height: 64px;}
<div >  <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/

总结

以上是内存溢出为你收集整理的html – CSS水平对齐显示 – 内联跨度全部内容,希望文章能够帮你解决html – CSS水平对齐显示 – 内联跨度所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/1044850.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-24
下一篇 2022-05-24

发表评论

登录后才能评论

评论列表(0条)

保存