css实现一段不够一行时居中显示,多于一行时两端对齐
今天有遇到这个问题,不够一行要居中才好看,多于一行居中又很难看:
居中
两端对齐
一开始想用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实现一段不够一行时居中显示,多于一行时两端对齐的更多相关文章
- 简单两步使用css控制div下导航栏ul居中显示
第一步:父层设置文本居中属性 ul{ text-align:center; } 第二步:li设置内联样式 li{ display:inline; } PS 只需以上两步就可以实现导航栏居中显示了,但为 ...
- HTML + CSS短标题(二,三,四文字长度)两端对齐的方式
今天切图碰到了一个看似好弄,却并不好弄的文本两端对齐问题.如图1-1
- css 多个不定数量提交按钮居中显示,纯css解决
前几天在公司修改一个css 多个按钮居中问题,其实这样的问题很多前端程序员都遇到过,举个例子吧: 在一行中有三个按钮或是两个按钮...个数不定,然后间距固定:然后就有很多人把所有按钮放到一个div中, ...
- CSS图片Img等比例缩放且居中显示
常用来做图片放大显示的遮罩层imgScale HTML <div id="imgScale" > <img src=""> </d ...
- css实现一行居中显示,两行靠左显示,超过两行以引号省略
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css实现一行文字居中,多行文字左对齐
问题及场景: 当内容能一行显示在盒子内时,文字居中对齐. 当内容过多换行后显示在盒子内时,文字左对齐. 其实这种视觉上的需求还是蛮常见的.比如用于弹出提示框,当提示内容比较少时,内容居中显示在弹出框, ...
- CSS基础之居中显示
这些天忙完了一些项目后,终于有时间来总结一下了.自己就把做项目过程中的体会和理解到的一些东西和大家分享一下.有错请指正!! 在css中,元素居中显示,是基础也是一个小难点.我们经常不知为何总是不能把元 ...
- css 图片内容在不同分辨率下居中显示(演示的图片宽度是1920px,当图片宽度大于显示屏的宽度时)
1.img 图片内容在不同分辨率下居中显示(如果隐藏多余,在img外面套一个div 设定overflow: hidden.div的大小就是img显示区域的大小) <!DOCTYPE html& ...
- div css 伪类 不固定图片大小 居中, css div 实现三角形
div css 伪类 不固定图片大小 居中 <style> .pic_box{width:300px; height:300px; background-color:#beceeb; fo ...
随机推荐
- KinderEditor编辑器使用
KinderEditor编辑器的使用 分为简单的三步.1:添加引用部分 <script src="/KinderEditor/kindeditor-min.js">&l ...
- Java 生成验证码
package com.lf.testvity; import java.awt.Color; import java.awt.Font; import java.awt.Graphics2D; im ...
- Asp.net导出Excel乱码的解决方法
通过跟踪Asp.net服务器代码,没有乱码,然而导出Excel到浏览器后,打开时出现乱码. 解决方法是添加编码格式的前缀字节码:Response.BinaryWrite(System.Text.Enc ...
- Java基础必备 -- 堆栈、引用传值、垃圾回收等
在Java中,对象作为函数参数的传递方式是值传递还是引用传递?String str = "abc" 与 String str = new String("abc&quo ...
- grub paramiter & menu.list
在Linux中,给kernel传递参数以控制其行为总共有三种方法: 1.build kernel之时的各个configuration选项. 2.当kernel启动之时,可以参数在kernel被GRUB ...
- c# AES加解密并转ASCII码
using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Sec ...
- java反射基本使用操作
反射的基本原理:反射的机制是通过类加载器将字节码文件读入到内存中,然后通过解析器在内存中解析出这个类的所有东西,当我们需要用到的时候我们可以拿出来使用. 一.反射一个类的构造函数 person类 pa ...
- sql join 优化
项目查询列表,需要新关联一张表,于是就让组下小伙更改了下sql语句,当再次进入列表查询时查询时间一下子就翻倍.那小伙找了半天没找原因. 于是我就打开代码查看,关联的一张表数据非常多,用的left jo ...
- 二、Java基础--02
作为本人首篇黑马技术博客有必要交代一下背景.个人理解博客的用作在于于己在于交流,于他在于学习,在交流学习中共同成长.下面进入正题.本文主要是介绍在做黑马入门测试时的一些问题(这个应该不是泄露题库吧). ...
- 十五、Java基础---------集合框架体系以及List
在介绍集合之前先说一下数组,正如我们所知,数组是某一类型数据的集合,强调的是数据,而且必须单一:集合框架的不同之处在于存储的数据类型没有任何限制,既可以存储基本数据类型(会自动提升为相应的包装类)也可 ...