码迷,mamicode.com
首页 > Web开发 > 详细

css实现一段不够一行时居中显示,多于一行时两端对齐

时间:2016-04-01 18:01:35      阅读:206      评论:0      收藏:0      [点我收藏+]

标签:

今天有遇到这个问题,不够一行要居中才好看,多于一行居中又很难看:

技术分享

居中

 

技术分享

两端对齐

 

一开始想用text-align-last:center; 可是这样结果是这样的:

技术分享

单行的居中了

技术分享

可是多行的最后一行也居中了。。。

后来改成这样:

1 <div class="text"><p>2. Tap WiFi Key Search</p></div>
2 <div class="text"><p>3. Please wait 5-15 secs in your Wi-Fi Settings for WiFi list to load. Tap on hotspots with "WiFi Master Key WiFi Key Search " to connect</p></div>
.text{
    width: 285px;
    margin: auto;
    padding: 8px;
    background-color: #d8d8d8;
    text-align: center;
    font-size: 15px;
    color: #333;
}
.text p{
    display: inline-block;
    margin: auto;
    text-align: justify;
}

 

可以让p text-align:justify;display:inline-block;给p加一个外层的框div,这个外层的框text-align:center;
这样p随着文字的宽度变化,并且p在div中居中,当p宽度不够一行的时候就看起来是居中的。

技术分享

技术分享

效果就实现了

css实现一段不够一行时居中显示,多于一行时两端对齐

标签:

原文地址:http://www.cnblogs.com/zqiong/p/5345652.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!