行内元素水平居中问题

个回答

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

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

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