实现的方法和详细的操作步骤如下:
1、第一步,创建一个新的html文档,在body标签中添加一个div标签并填写一段文本,然后为该div设置一些样式,见下图,转到下面的步骤。
2、第二步,执行完上面的操作之后,将“
text-align”属性添加到div,该属性值为“ center”,然后文本将在框架内水平居中,见下图,转到下面的步骤。
3、第三步,执行完上面的操作之后,将“
line-height”属性添加到div,该属性值为div的高度,然后文本将在框中垂直居中,见下图。这样,就解决了这个问题了。
简单的几种基础的居中方式:
1.块中文字水平居中:text-align 用于块级元素,作用在使用它的块元素中的文字或者图片上。使得它们在水平方向上居中。
这个属性只能作用于块元素(或者被CSS控制为块元素的内联元素,但是被控制为内联元素的块元素是不行的)。一句话来说,就是要拥有块元素的特点的那些元素。这个很好理解,居中,肯定是行居中,如果使用它的元素本身不拥有完整的在宽度上的独立空间,它当然没有能力让它内部的文字或者图片居中。(难道要占用别人的地盘里居中,岂不混乱啦)
例子:
我是正常p,我设置了居中
能不能再同一行,我是被inline了的p,我设置了居中可是不能居中!
align是水平居中 valign 就是垂直对齐