行内元素水平居中问题
如果一个div里有多个行内元素，有的想居中，有的不想，具体应该怎么做，最好写个例子，谢谢。
慕粉1606461256
2017-03-24
3 回答
这下对了，将行内元素转换为块级元素就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>查看1条回复
选了一个选择器，假如你不想又再增加一个类的话，可以试试这种伪选择器。
<!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>代码如下，靠选择器立功，仅供参考。
<!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/150
提交
取消
