怎么用CSS样式使文本居中对齐？

html-css0150

怎么用CSS样式使文本居中对齐？,第1张

text-align: center水平居中

height:30pxline-height:30px垂直居中

vertical-align:middle垂直居中

td里面可以直接<td valign="middle" align="center"

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

其实当时在互联网界已经有过一些统一样式表语言的建议了，但CSS是第一个含有“层叠”丰意的样式表语言。在CSS中，一个文件的样式可以从其他的样式表中继承。读者在有些地方可以使用他自己更喜欢的样式，在其他地方则继承或“层叠”作者的样式。这种层叠的方式使作者和读者都可以灵活地加入自己的设计，混合每个人的爱好。

哈坤于1994年在芝加哥的一次会议上第一次提出了CSS的建议，1995年的www网络会议上CSS又一次被提出，博斯演示了Argo浏览器支持CSS的例子，哈肯也展示了支持CSS的Arena浏览器。

目前在select元素中你使用css: text-align, 你会发现根本不起作用。

select { text-align: right }option { text-align: right }

似乎在所有基于webkit的浏览器没有对select实现text-align这个CSS属性。

这里有一些临时的解决方案

1) 简单点的使用padding使其“看上去”对齐

比如： 这里比较适合宽度固定的场合，只要padding合适，效果还是不错的

select { ... padding: 0 0 0 20px}

示例 http://jsfiddle.net/P5k4D/1/

2） 使用一些UI库实现

比如jQueryUI的select menu

优点是可以解决select控制在各个浏览器界面不一致的问题。

3） 居右对齐：　可以使用rtl属性来来控制，

<select dir="rtl"> <option>Foo</option> <option>bar</option> <option>to the right</option></select>

写成CSS的话则为：

select {direction: rtl}