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

html-css012

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。

例:居中.wrapper里的.content

一. 已经元素的宽高的前提下:

(1)  left:50%top:50%

父元素设置相对定位,position: relative 

子元素(要居中的元素)设置绝对定位,position: absolute  left: 50%   top: 50%

(2)设置margin: auto

父元素设置相对定位,position: relative

子元素(要居中的元素)设置绝对定位,position: absolutemargin: auto

(3)   flex布局

父元素设置 display: flex  justify-content: center   align-items: center

二.未知元素宽高的情况下:

(1)四个方向设置值,把元素撑开

父元素设置相对定位,position: relative 

子元素设置绝对定位,position: absolutetop与bottom设置一样的值,left与right设置一样的值,把容器撑开

如何让WORD中的文字上下左右都居中?

在整张纸上居中,由 水平居中 和 垂直居中 两部份组成

水平居中:大家都知道,可以在工具栏中单击“居中”;也可以格式-段落-缩进和间距-常规-对齐方式-居中

垂直居中:文件-页面设置-版式-页面-垂直对齐方式-选择“居中”

在WORLD里,字体方向:文件-页面设置-文档网格-文字排列-方向

如何让WORD中的文字上下左右都居中?

一、设置上下居中 1、单击页面布局选项卡右下角如图所示的按钮; 2、弹出页面设置对话框,选择版式选项卡,在垂直对齐方式处选择居中即可。 二、设置左右居中 1、选中需要设置的文本; 2、单击开始----居中按钮即可。

怎么在word表格让文字上下居中

以word2007为例:

方法1、选中单元格,单击“布局”菜单,单击“属性”命令,在弹出的“表格属性”对话框中单击“单元格”选项卡下方的垂直方向的“居中”按钮,单击“确定”按钮。如下图:

方法2、选中单元格,单击“布局”菜单,单击“中部两端对齐”或“水平居中”或“中部右对齐”按钮。如下图:

word里怎么让文本框里字体上下居中呢?

右击文本框选择叠放层次,选置于底层试试看。

word2013 怎么使表格中的文字上下居中

上下居中应该就是水平居中,应该是效果一样,选定文字,但表格工具中找到文字对齐。,下拉菜单选择水平居中即可,

或者右击-单元格对齐方式-水平居中 就可以了,希望对你有用。

在Word中如何将文字在一行里面上下居中?

选中文字,右键点击段落,然后更改段前和段后的间距就行了

word2013 怎么使表格中的文字上下居中

参照图片中即可。

另:1、全选表格;2、表格工具栏中选”中部居中“;3、格式工具栏中选”更改文字方向“;这两个操作就可使文字垂直并中间居中

DIV+CSS如何让文字垂直居中?

在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要罗嗦两句,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valign特性的元素才生效,例如表格元素中的、、等,而像

、 这样的元素是没有valign特性的,因此使用vertical-align对它们不起作用。

CSS网页布局DIV水平居中的各种方法

一、单行垂直居中

如果一个容器中只有一行文字,对它实现居中相对比较简单,我们只需要设置它的实际高度height和所在行的高度line-height相等即可。如:

imoker(爱摩客)提供的代码片段:

div {

height:25px

line-height:25px

overflow:hidden

}

这段代码很简单,后面使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行,这样就达不到垂直居中效果了。

imoker(爱摩客)提供的代码片段:

单行文字实现垂直居中

>

怎样在word2010中让文字在一行中上下居中?如图 5分

右击,段落,将“段前”、“段后”值设置相同值,或都设为0.

如果设置没错,是页首段落出现段前值不见了,可在上一页后面插入“下上页分节符”。

在Word里面做表格如何将文字上下居中

方法:

打开WORD文档,选中需要设置的表格,右键---单元格对齐方式--水平居中即可。