文字两端居中解决方案

在做表单时我们经常遇到让上下两个字段对齐的情况,比如姓名, 手机号码, 出生地。遇到这种情况一般会用左右浮动,虽然可以实现效果但是感觉很low~如果你细心发现你会记得关于文字对齐有一个样式是text-align: text-justify当时可能你是因为浏览器不兼容而没用,现在我给大家讲一下兼容浏览器的写法:

p { width:200px; border:1px solid #ddd; font-size:12px; line-height:30px; overflow: hidden;}
p span{ display:inline-block; float:left; width: 150px; text-align:justify; text-justify:distribute-all-lines;/*ie6-8*/         text-align-last:justify;/* ie9*/ -moz-text-align-last:justify;/*ff*/ -webkit-text-align-last:justify;/*chrome 20+*/}
@media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/
   p span:after{  content:".";  display: inline-block;  width:100%;  overflow:hidden;  height:0;}
    }

<p><span>地址</span>:</p><p><span>邮箱地址</span>:</p><p><span>地址</span>:</p>

有人会纳闷为什么还用媒体查询了,没办法,谷歌就是会有bug只有这样才能解决。就像其他人用空的span一样

时间: 2024-10-03 15:11:34

文字两端居中解决方案的相关文章

【CSS】 元素块与文字的各种居中解决方案

元素块的居中 首先有这样一个200*200px的元素块在界面内. 元素块的水平居中: 如果想要让其水平居中,则有三种方法: 第一种是知道屏幕的长宽,则根据计算,(屏幕宽X-元素块宽Y)/ 2的结果是元素块向右偏移的长度,不过这种方法很蠢笨,通过外边距调整元素的位置只有在调整元素间的间距时才有作用: 至于第二种,就很合适了,我们不必知道屏幕的宽度,只需要设置外边距: .box { width: 200px; height: 200px; background: #333; margin-left:

【】小技巧】CSS文字两端对齐

需求如下,红框所在的文字有四个字的.三个字的.两个字的,如果不两端对齐可以选择居中对齐,或者右对齐.但是如果要像下面这样两端对齐呢? 我相信以前很多人都这么干过:两个字中间使用 来隔开达到四个字的宽度,三个字也可以,但是,像上图中“122账号”“122密码”这样的,就不好计算该用几个空格了. 假如我们有如下HTML: <div>这世间唯有梦想和好姑娘不可辜负!</div> 给它加点样式 div{ width:500px; border:1px solid red; text-ali

HTML,文字两端对齐

text-align: justify样式的意思是文字两端对齐,但是有时候你会发现这东西不起左右,比如在div标签中的文字. 解决方法:在div中放一个空的span标签,并使用下面的样式. .justify        {            text-align: justify;            width: 100px;        }        .justify > span        {            display: inline-block /* Ope

可用的CSS文字两端对齐

最近在工作项目中接触到Web界面设计的问题,要实现文字两端对齐的效果.在网上搜索了一下,用的都是类似的技巧: text-align:justify;text-justify:inter-ideograph; 我遇到问题是:看不到效果,无论是英文还是中文,在IE和chrome下都不起作用.还好在StackOverflow上找到了解决方法 :) 样式: 1 div.justify 2 { 3 text-align: justify; width:200px; font-size:15px; colo

实现段落文字两端对齐的css样式

有时候网站中的文字比较多,虽然为父元素设置了宽度,但是总是会出现两端参差不齐的情况,看起来不整齐.其实实现段落的两端对齐,只需要设置两个css 样式即可. .demo{ text-align: justify; text-justify: inter-ideograph;/*IE*/ } text-justify基本语法 语法:text-justify : auto |inter-word | newspaper | distribute | distribute-all-lines | int

小图标和文字的居中对齐-小总结

小图标和文字的居中对齐问题,相信大家在很多时候会遇到.今天楼主从其他大神那边扒了一些方法,现在做个小小的总结. 说明:本次用到的小图标来自阿里巴巴矢量图,大家可以去找一下(地址:http://www.iconfont.cn/plus/collections/detail?cid=3223)我的图标尺寸是20px*20px 第一种办法:vertical-align和line-height结合 特点:这种办法只适用于放置小图标和文字的标签的display属性都是inline的情况. 效果图: 代码如

RadioButton的drawableTop图片文字不居中

在安卓应用的开发中,一般普通应用用到最多的就是底部放一个RadioGroup实现切换的布局,今天在实现的时候,却出现了底部RadiButton的drawableTop图片及文字无法居中的情况,经过对比实验发现RadioButton在不加background属性时,只能靠右对齐,加了layout_gravity和gravity属性也无效.如下图:加了一个background就马上看到效果,style属性定义如下所示:之前做的时候没有在意,遇到问题就浪费时间,小小的问题让我又是百度又是google了

重写Button实现图片drawableTop和文字一起居中

很多情况下,我们需要这样的Button. 当然是可以通过建立一个LinearLayout来摆放一个ImageView和TextView来实现.这里就不说这种方法了. 还有一个实现方法是通过下面标签实现: android:drawableLeft, android:drawableRight, android:drawableTop, android:drawableBottom: 可是通过上面的标签来实现的话,图片会被贴着边缘摆放,如下图,这样没办法跟文字一起居中. 这里我们可以通过重写Butt

DIV+CSS中让布局居中_背景图片居中_文字内容居中

DIV+CSS中让布局居中_背景图片居中_文字内容居中