                        課程
                    
                        /前端開發(fā)
                        
                            /HTML/CSS
                        
                        /初識(shí)HTML(5)+CSS(3)-升級(jí)版

不能寫成img{text-align:center;}嗎

timebank

2014-12-24

源自：初識(shí)HTML(5)+CSS(3)-升級(jí)版 10-12

關(guān)注問題我要回答

6117

操作

收起

6 回答

Patiencing
2016-05-28

你可以測(cè)試一下, 直接在img中設(shè)置text-align屬性:

<html>
??<head>
??</head>
??<body>
????<img?src="https://img3.doubanio.com/lpic/s10520230.jpg"?style="text-align:center"/>
??</body>
</html>

回發(fā)現(xiàn): 圖片仍然按照默認(rèn)的流動(dòng)布局 - 從左邊開始布局.

試一下在包含img元素的塊級(jí)元素中設(shè)置text-align屬性:

<html>
??<head>
??</head>
??<body>
????<div?style="text-align:center;">????//這個(gè)div元素包含了圖片
????<img?src="https://img3.doubanio.com/lpic/s10520230.jpg"?/>
??</div>
??</body>
</html>

會(huì)發(fā)現(xiàn)圖片居中顯示了.

解釋兩者這需要回到text-align屬性的定義上:

text-align屬性: 是用來設(shè)置塊級(jí)元素里面內(nèi)容的水平對(duì)齊方式

也就是說text-align屬性只能設(shè)置在塊級(jí)元素上, 用來控制塊級(jí)元素內(nèi)部的內(nèi)容(包括文本圖片), 而不能直接在內(nèi)容上(比如行內(nèi)元素或者文本)上設(shè)置

1 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

死士甲
2015-06-08

img是內(nèi)聯(lián)塊狀元素，text-align:center作用的是塊狀元素內(nèi)的內(nèi)容，

常用的塊狀元素有：

4 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

拾荒騷年
2015-04-10

<!DOCTYPE?HTML>

<html>

<head>

??div{

??????text-align:center;

???}

</style>

</head>

<body>

</body>

</html>

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

lilian8020056
2014-12-29

<!DOCTYPE?HTML>
<html>
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8">
<title>對(duì)齊</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的父容器中。

1 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答