行内元素水平居中问题-慕课网

行内元素水平居中问题

来源：15-1 水平居中设置-行内元素

慕粉1606461256

2017-03-24 11:33

如果一个div里有多个行内元素，有的想居中，有的不想，具体应该怎么做，最好写个例子，谢谢。

写回答关注

3回答

黑色丶毛衣: 2017-03-24 14:19: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://img.mukewang.com/52da54ed0001ecfa04120172.jpg" />
    <br />
    <span class="left">听说你不想居中啊！向左靠齐吧</span>
    <br />
    <span class="right">听说你不想居中啊！向右靠齐吧</span>
</div>
</body>
</html>

4 0

慕数据926...

请问为什么要让他们成为块级元素，不是块级元素就不能靠左靠右呢

2017-06-02 21:52:49

共 4 条回复 >

黑色丶毛衣: 2017-03-24 14:36:05

选了一个选择器，假如你不想又再增加一个类的话，可以试试这种伪选择器。

<!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://img.mukewang.com/52da54ed0001ecfa04120172.jpg" />
    <span>听说你不想居中啊！向左靠齐吧</span>
    <span>听说你不想居中啊！向右靠齐吧</span>
</div>
</body>
</html>

0 0

黑色丶毛衣: 2017-03-24 13:56:37

代码如下，靠选择器立功，仅供参考。

<!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://img.mukewang.com/52da54ed0001ecfa04120172.jpg" />
    <p>听说你不想居中啊！向左靠齐吧</p>
    <p>听说你不想居中啊！向右靠齐吧</p>
</div>
</body>
</html>

1 0

黑色丶毛衣

错了错了，P是块级元素。。暂时没找到解决办法，我先看完后面的课程，回头再来答。

2017-03-24 14:05:33

共 1 条回复 >

初识HTML(5)+CSS(3)-升级版

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

1225806 学习 · 18234 问题

查看课程

相似问题

水平居中行内元素问题

回答 1