css文字对齐处理

转载 2013年12月04日 14:59:30
表单页面,为了使表单元素和文字都垂直居中对齐,加个样式input,select{vertical-align:middle},文本框和下拉框都没问题,但是单选框和复选框就杯具了。 

大多表现:单选,复选和文字无间距,单选文字偏上,复选偏上。 


关于这些问题网上有人发表了看法,用table搞定一切。这个也是一种方法,哥也不BS。 
对于ie6,7下的文字间距问题,网上看到有人说设置width:14px就好了,我试了下发现width:13px更佳。这个问题解决。

对于文字偏上的问题,试了vertical-align下的所有属性都不行。后来发现vertical-align是可以设置数值的,真是白混了这么久。 
单选设置了vertical-align:-2px;复选设置vertical-align:-3px;就ok了。拿到ie6,7下测试,发现差了1px,使用了hack搞定。(ie6,7就是神奇)
详细出处参考:http://www.jb51.net/css/76016.html

css+js解决文本两端对齐以及分散对齐

一个很简单的设计排版样式,A图表示居左对其,但实际上我们想要的可能是B所示的对齐方式。 这就是传说中的两端对齐 还有一种更确切的说法是两端分散对齐。 最开始的时候 ,我试图使用CSS来解决这个小问题...
  • nieshanfeng1
  • nieshanfeng1
  • 2014年02月14日 10:56
  • 7297

css 让同一行的图片和文字对齐的3种方法

初学css的新手朋友经常会遇到一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么我们怎么才能在css中控制他们在同一行显示呢,其实方法有3...
  • afeie
  • afeie
  • 2014年06月14日 10:11
  • 1897

纯CSS实现文字一行居中,多行左对齐的方法

纯CSS实现文字一行居中,多行左对齐的方法其实这种需求还是蛮常见的。主要用于产品列表页面,用于产品图片下面,显示产品的名称。但是其纯CSS实现实在是烧脑,一般就放掉这个需求,或者,使用JS实现。但是,...
  • FungLeo
  • FungLeo
  • 2015年11月12日 12:29
  • 21207

深入理解css基线与行高

基线、底线、顶线、中线 、行高
  • IT_Queen
  • IT_Queen
  • 2017年01月25日 15:58
  • 3171

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

在做前台界面的时候,比如一些文字的列表或者一些表单的标题,经常是2个字,3个字,4个字的类型。 一般对齐就是在中间打空格或者用 来空开,但是效果并不好,兼容性有问题,造成不美观。经过一...
  • muyutingfeng2008
  • muyutingfeng2008
  • 2015年09月07日 11:17
  • 9530

css实现文字指定位置显示,底部对齐,文字在块内的垂直对齐

CSS实现文字底部对齐 #txt{ height:246px; width:512px; border:1px solid #000000; position:relative ...
  • abeetle
  • abeetle
  • 2014年07月23日 16:40
  • 23872

css实现文本和div居中对齐详细讲解示例

 http://www.jb51.net/css/162086.html 1. 文本居中 首先编写一个简单的html代码,设置一个类名为parentDiv的div对象。html代码如下: ...
  • yuanyuan_186
  • yuanyuan_186
  • 2016年04月19日 17:19
  • 555

CSS入门之文本样式用法(文本对齐,首行缩进,文本竖排,文字方向)

文本对齐有4种: 1.text-align:left 2.text-align:right 3.text-align:center 4.text-align:justify 首行缩进:text-ind...
  • u011333814
  • u011333814
  • 2014年01月27日 00:06
  • 2343

小icon与后面文字对齐

由于vertical-align属性的兼容性,以及vertical-align:middle并不是严格意义的垂直居中,因此,小图标+文字的对齐,基本上都要针对不同浏览器加个hack补丁;在加上,如果你...
  • sherry_0706
  • sherry_0706
  • 2016年09月22日 10:12
  • 1491

CSS实现居中对齐

Part1 水平居中的方案: 1.行内元素,可以设置text-align属性 text-align:center; 2.固定宽度块状元素,可以设置左右margin值为auto来使用 margin:0 ...
  • xiaguangzhiying
  • xiaguangzhiying
  • 2016年09月10日 16:40
  • 5890
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css文字对齐处理
举报原因:
原因补充:

(最多只允许输入30个字)