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

行內(nèi)元素水平居中問題

如果一個(gè)div里有多個(gè)行內(nèi)元素，有的想居中，有的不想，具體應(yīng)該怎么做，最好寫個(gè)例子，謝謝。

慕粉1606461256

2017-03-24

源自：初識(shí)HTML(5)+CSS(3) 15-1

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

1189

操作

收起

3 回答

黑色丶毛衣回答被采納 +3 積分
2017-03-24

這下對(duì)了，將行內(nèi)元素轉(zhuǎn)換為塊級(jí)元素就OK了吧~

<!DOCTYPE?HTML>
<html>
<head>
<meta?charset="utf-8">
<title>定寬塊狀元素水平居中</title>
<style>
div{
????border:1px?solid?red;
????margin:20px;
}
div.txtCenter{
????text-align:center;
}
div.imgCenter{
????text-align:center;
????padding-top:4px;
}
div.imgCenter>img{
????width:280px;
????/*height:175px;*/
}
span.left{
????display:block;
????text-align:left;
}
span.right{
????display:block;
????text-align:right;
}
</style>
</head>

<body>
<div?class="txtCenter">我是文本，哈哈，我想要在父容器中水平居中顯示。</div>

<!--下面是任務(wù)部分-->

<div?class="imgCenter">
????<img?src="http://img1.sycdn.imooc.com//52da54ed0001ecfa04120172.jpg"?/>
????<br?/>
????<span?class="left">聽說你不想居中?。∠蜃罂魁R吧</span>
????<br?/>
????<span?class="right">聽說你不想居中??！向右靠齊吧</span>
</div>
</body>
</html>

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

收起回答

#1

慕粉1606461256 提問者

span.left、、、、{}是什么意思??？謝謝解惑

2017-03-24 回復(fù) 有任何疑惑可以回復(fù)我~

#2

黑色丶毛衣回復(fù) 慕粉1606461256 提問者

CSS的選擇器呀，我給span標(biāo)簽加了個(gè)class="left"的類。

2017-03-24 回復(fù) 有任何疑惑可以回復(fù)我~

#3

慕粉1606461256 提問者回復(fù) 黑色丶毛衣

學(xué)習(xí)了

2017-03-24 回復(fù) 有任何疑惑可以回復(fù)我~

查看1條回復(fù)

黑色丶毛衣
2017-03-24

選了一個(gè)選擇器，假如你不想又再增加一個(gè)類的話，可以試試這種偽選擇器。

<!DOCTYPE?HTML>
<html>
<head>
<meta?charset="utf-8">
<title>定寬塊狀元素水平居中</title>
<style>
div{
????border:1px?solid?red;
????margin:20px;
}
div.txtCenter{
????text-align:center;
}
div.imgCenter{
????text-align:center;
????padding-top:4px;
}
div.imgCenter>img{
????width:280px;
????/*height:175px;*/
}
span:nth-child(2){??????/*span標(biāo)簽父元素的第二個(gè)子節(jié)點(diǎn)*/
????display:block;
????text-align:left;
????background:red;
}
span:last-child{????????/*span標(biāo)簽父元素的最后一個(gè)子節(jié)點(diǎn)*/
????display:block;
????text-align:right;
}
</style>
</head>

<body>
<div?class="txtCenter">我是文本，哈哈，我想要在父容器中水平居中顯示。</div>

<!--下面是任務(wù)部分-->

<div?class="imgCenter">
????<img?src="http://img1.sycdn.imooc.com//52da54ed0001ecfa04120172.jpg"?/>
????<span>聽說你不想居中?。∠蜃罂魁R吧</span>
????<span>聽說你不想居中?。∠蛴铱魁R吧</span>
</div>
</body>
</html>

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

收起回答

黑色丶毛衣
2017-03-24

代碼如下，靠選擇器立功，僅供參考。

<!DOCTYPE?HTML>
<html>
<head>
<meta?charset="utf-8">
<title>定寬塊狀元素水平居中</title>
<style>
div{
????border:1px?solid?red;
????margin:20px;
}
div.txtCenter{
????text-align:center;
}
div.imgCenter{
????text-align:center;
????padding-top:4px;
}
div.imgCenter>img{
????width:280px;
????/*height:175px;*/
}
div.imgCenter>p{
????text-align:left;
}
div.imgCenter>p+p{
????text-align:right;
}
</style>
</head>

<body>
<div?class="txtCenter">我是文本，哈哈，我想要在父容器中水平居中顯示。</div>

<!--下面是任務(wù)部分-->

<div?class="imgCenter">
????<img?src="http://img1.sycdn.imooc.com//52da54ed0001ecfa04120172.jpg"?/>
????<p>聽說你不想居中??！向左靠齊吧</p>
????<p>聽說你不想居中??！向右靠齊吧</p>
</div>
</body>
</html>

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

收起回答

#1

黑色丶毛衣

錯(cuò)了錯(cuò)了，P是塊級(jí)元素。。暫時(shí)沒找到解決辦法，我先看完后面的課程，回頭再來答。

2017-03-24 回復(fù) 有任何疑惑可以回復(fù)我~