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

行內元素水平居中問題

如果一個div里有多個行內元素，有的想居中，有的不想，具體應該怎么做，最好寫個例子，謝謝。

慕粉1606461256

2017-03-24

源自：初識HTML(5)+CSS(3)-升級版 15-1

關注問題我要回答

1158

操作

收起

3 回答

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

這下對了，將行內元素轉換為塊級元素就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>

<!--下面是任務部分-->

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

0 回復有任何疑惑可以回復我~

收起回答

慕粉1606461256 提問者

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

2017-03-24 回復有任何疑惑可以回復我~

黑色丶毛衣回復慕粉1606461256 提問者

CSS的選擇器呀，我給span標簽加了個class="left"的類。

2017-03-24 回復有任何疑惑可以回復我~

慕粉1606461256 提問者回復黑色丶毛衣

學習了

2017-03-24 回復有任何疑惑可以回復我~

查看1條回復

黑色丶毛衣
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;*/
}
span:nth-child(2){??????/*span標簽父元素的第二個子節點*/
????display:block;
????text-align:left;
????background:red;
}
span:last-child{????????/*span標簽父元素的最后一個子節點*/
????display:block;
????text-align:right;
}
</style>
</head>

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

<!--下面是任務部分-->

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

0 回復有任何疑惑可以回復我~

收起回答

黑色丶毛衣
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>

<!--下面是任務部分-->

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

0 回復有任何疑惑可以回復我~

收起回答

黑色丶毛衣

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

2017-03-24 回復有任何疑惑可以回復我~