不能写成img{text-align:center;}吗
不能写成img{text-align:center;}吗
timebank
2014-12-24
6 回答
你可以测试一下, 直接在img中设置text-align属性:
<html> <head> </head> <body> <img src="https://img3.doubanio.com/lpic/s10520230.jpg" style="text-align:center"/> </body> </html>
回发现: 图片仍然按照默认的流动布局 - 从左边开始布局.
试一下在包含img元素的块级元素中设置text-align属性:
<html> <head> </head> <body> <div style="text-align:center;"> //这个div元素包含了图片 <img src="https://img3.doubanio.com/lpic/s10520230.jpg" /> </div> </body> </html>
会发现图片居中显示了.
解释两者这需要回到text-align属性的定义上:
text-align属性: 是用来设置块级元素里面内容的水平对齐方式
也就是说text-align属性只能设置在块级元素上, 用来控制块级元素内部的内容(包括文本图片), 而不能直接在内容上(比如行内元素或者文本)上设置
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>对齐</title>
<style type="text/css">
div{
text-align:center;
}
</style>
</head>
<body>
<div><img src="http://img1.sycdn.imooc.com//52b4113500018cf102000200.jpg" ></div>
</body>
</html>把text-align:center;代码放置到img的父容器中。
举报
0/150
提交
取消
