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

居中

两端对齐

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

单行的居中了

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

后来改成这样:

 <div class="text"><p>2. Tap WiFi Key Search</p></div>
<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实现一段不够一行时居中显示,多于一行时两端对齐的更多相关文章

  1. 简单两步使用css控制div下导航栏ul居中显示

    第一步:父层设置文本居中属性 ul{ text-align:center; } 第二步:li设置内联样式 li{ display:inline; } PS 只需以上两步就可以实现导航栏居中显示了,但为 ...

  2. HTML + CSS短标题(二,三,四文字长度)两端对齐的方式

    今天切图碰到了一个看似好弄,却并不好弄的文本两端对齐问题.如图1-1

  3. css 多个不定数量提交按钮居中显示,纯css解决

    前几天在公司修改一个css 多个按钮居中问题,其实这样的问题很多前端程序员都遇到过,举个例子吧: 在一行中有三个按钮或是两个按钮...个数不定,然后间距固定:然后就有很多人把所有按钮放到一个div中, ...

  4. CSS图片Img等比例缩放且居中显示

    常用来做图片放大显示的遮罩层imgScale HTML <div id="imgScale" > <img src=""> </d ...

  5. css实现一行居中显示,两行靠左显示,超过两行以引号省略

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. css实现一行文字居中,多行文字左对齐

    问题及场景: 当内容能一行显示在盒子内时,文字居中对齐. 当内容过多换行后显示在盒子内时,文字左对齐. 其实这种视觉上的需求还是蛮常见的.比如用于弹出提示框,当提示内容比较少时,内容居中显示在弹出框, ...

  7. CSS基础之居中显示

    这些天忙完了一些项目后,终于有时间来总结一下了.自己就把做项目过程中的体会和理解到的一些东西和大家分享一下.有错请指正!! 在css中,元素居中显示,是基础也是一个小难点.我们经常不知为何总是不能把元 ...

  8. css 图片内容在不同分辨率下居中显示(演示的图片宽度是1920px,当图片宽度大于显示屏的宽度时)

    1.img 图片内容在不同分辨率下居中显示(如果隐藏多余,在img外面套一个div  设定overflow: hidden.div的大小就是img显示区域的大小) <!DOCTYPE html& ...

  9. div css 伪类 不固定图片大小 居中, css div 实现三角形

    div css 伪类 不固定图片大小 居中 <style> .pic_box{width:300px; height:300px; background-color:#beceeb; fo ...

随机推荐

  1. KinderEditor编辑器使用

    KinderEditor编辑器的使用 分为简单的三步.1:添加引用部分 <script src="/KinderEditor/kindeditor-min.js">&l ...

  2. Java 生成验证码

    package com.lf.testvity; import java.awt.Color; import java.awt.Font; import java.awt.Graphics2D; im ...

  3. Asp.net导出Excel乱码的解决方法

    通过跟踪Asp.net服务器代码,没有乱码,然而导出Excel到浏览器后,打开时出现乱码. 解决方法是添加编码格式的前缀字节码:Response.BinaryWrite(System.Text.Enc ...

  4. Java基础必备 -- 堆栈、引用传值、垃圾回收等

     在Java中,对象作为函数参数的传递方式是值传递还是引用传递?String str = "abc" 与 String str = new String("abc&quo ...

  5. grub paramiter & menu.list

    在Linux中,给kernel传递参数以控制其行为总共有三种方法: 1.build kernel之时的各个configuration选项. 2.当kernel启动之时,可以参数在kernel被GRUB ...

  6. c# AES加解密并转ASCII码

    using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Sec ...

  7. java反射基本使用操作

    反射的基本原理:反射的机制是通过类加载器将字节码文件读入到内存中,然后通过解析器在内存中解析出这个类的所有东西,当我们需要用到的时候我们可以拿出来使用. 一.反射一个类的构造函数 person类 pa ...

  8. sql join 优化

    项目查询列表,需要新关联一张表,于是就让组下小伙更改了下sql语句,当再次进入列表查询时查询时间一下子就翻倍.那小伙找了半天没找原因. 于是我就打开代码查看,关联的一张表数据非常多,用的left jo ...

  9. 二、Java基础--02

    作为本人首篇黑马技术博客有必要交代一下背景.个人理解博客的用作在于于己在于交流,于他在于学习,在交流学习中共同成长.下面进入正题.本文主要是介绍在做黑马入门测试时的一些问题(这个应该不是泄露题库吧). ...

  10. 十五、Java基础---------集合框架体系以及List

    在介绍集合之前先说一下数组,正如我们所知,数组是某一类型数据的集合,强调的是数据,而且必须单一:集合框架的不同之处在于存储的数据类型没有任何限制,既可以存储基本数据类型(会自动提升为相应的包装类)也可 ...