CSS 一个DIV里面的文字如何上下左右居中显示？

html-css06

CSS 一个DIV里面的文字如何上下左右居中显示？,第1张

这样：

body{margin:0padding:0width:100%

height:100%

}div{position:absolutetop:50%left:50%margin-top:-250px margin-left:-250px/*此时宽和高都要固定*/width:500pxheight:500px}body{

margin:0

padding:0

width:100%

height:100%

}

div{

position:absolute

top:50%

left:50%

margin-top:-250px

margin-left:-250px

/*此时宽和高都要固定*/

width:500px

height:500px

}

扩展资料：

注意事项

一、用两个值就可以了

1、text-align:center

//这是让文字左右居中

2、line-height:100px

//这是让文字垂直居中

vertical-align:middle

//这个属性不能让文字垂直居中，该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

二、多行文本垂直居中分为两种情况，一个是父级元素高度不固定，随着内容变化；另一个是父级元素高度固定。

1、父级元素高度不固定

父级高度不固定的时，高度只能通过内部文本来撑开。可以通过设置内填充（padding）的值来使文本看起来垂直居中，只需设置padding-top和padding-bottom的值相等：

<!--html代码-->

<divid="div1">

这是多行文本垂直居中，

这是多行文本垂直居中，

这是多行文本垂直居中，

这是多行文本垂直居中。

</div>

/*css代码*/

#div1{

width:300px

margin:50pxauto

border:1pxsolidred

text-align:center/*设置文本水平居中*/

padding:50px20px

}

2、父级元素高度固定

只对拥有valign特性的元素才生效，结合display:table，可以使得div模拟table属性。因此可以设置父级div的display属性：display:table；然后再添加一个div包含文本内容，设置其display:table-cell和vertical-align:middle。

你的想法很多人都有过，但是CSS确实不好实现，我这里有些笨办法应该可以实现

0、css expression 可能能实现，但是只有IE支持，所以算了。

[/楼主PS：那还说个屁]

1、知道层的宽，知道背景图的宽....加减法 你懂得

[/楼主PS：靠死板]

2、用JS，获取图层宽，获取背景图宽，....加减法 你懂得

[/楼主PS：我都说了要CSS控制]

3、用两个层div1包含div2，div2离div1右侧10px，div2背景右对齐。

[/fzqiaoqiao：估计你不喜欢]

4、把图片右边做10px的空白，直接右对齐!

[/fzqiaoqiao：淫荡的笑]

用CSS将select/option文本居中或居右对齐：

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

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

select {

...

padding: 0 0 0 20px

}

2） 使用一些UI库实现

比如jQueryUI

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

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

<select dir="rtl">

<option>Foo</option>

<option>bar</option>

<option>to the right</option>

</select>

写成CSS的话则为：

select {

direction: rtl

}