目录
对于图片居中的问题,网上有很多很多方法,图片居中又分水平居中和垂直居中。之前有文章:DIV中让图片水平、垂直居中、使一个层垂直居中于浏览器。
最近有童鞋问我,在一个div里面,其中有文字和图片,现在想要的效果是文字左对齐,图片居中对齐。然后说对图片定义text-align:center;无效。
我说这里用text-align:center;肯定没有效果的,text-align是文字对齐属性,你用图片上肯定是无效的。
那么我们如何实现上述效果呢?
其实也不是复杂的事情,我可以变通一下,把图片变成块级元素来显示就行了。
举例说明:
Html代码:
<div class="article">
<p>威言威语</p>
<p>https://www.weisay.com</p>
<p><img src="/blog/ico/css.gif" alt="" title="" /></p>
</div>
CSS代码:
.article p{
padding:3px;
text-align:left;
}
.article p img{
margin:0 auto;
display:block;
}
当然其中的text-align:left;是可以不写,默认就是居左对齐。
请问这篇文章内的代码插件是什么呢?
@huliSyntaxHighlighter Evolved
来学习了。呵呵。要更新哇
@Monarch最近比较忙,手上有项目要做。
嗯。说的就是。
几天没来,跟新好几篇文章了,看来以后还是得常来学习!
@魏星博客哈哈,这个还是需要的
@Nunki哈哈,没有用我也不写了
浅显易懂,学习了!
@我爱pc用最简单的代码做最全的事情~
@evil互相学习~
之前我也被这个问题纠结过,但最后还是很好的解决了~
@集趣哈哈,还有什么好方法么~
這個讓kita想起了以前用過的版面居中,也是有margin: 0 auto;
@kitamargin: 0 auto,一般对层居中用的比较多,所以把图片变成类似div的块级元素来居中。
我会想到margin:0 auto;但不会想到display:block;,哈哈,学习了。
@木本无心你谦虚了,我知道你CSS也厉害的
这个问题在之前的几个主题已经困扰我很久了
@毕扬以后就不会了,哈哈
这个问题当初困扰我好长时间
哦,仔细看了下,就是你说的了。。。
@雅岚哈哈,这个方法是最简单实用的
没有啊,我那边可以这样设定,让图片居中的嘛。。
p.s
上次在瓶子提到威威的黑白主题,岚女就想过来围观一下,结果。。哈哈。。简洁的导航页挺有意思,嘿嘿
威兄 请教一下哦~为什么我的网站WP升级后头像不显示了呢 ~什么原因~~
@锐品创意貌似现在已经正常显示了~
有时候觉得 CSS比 编程语言如C#啥的难学
@三人帮我倒是觉得CSS是做好学的
@三人帮CSS比编程语言是要简单的,这是很肯定的事情。
早上3点多跑过来一看,竟然新发表了一篇日志,凌晨了还在写文章,真有你的~~
@qiuyili我认真啊,哈哈