CSS实现居中

最新推荐文章于 2024-09-19 00:05:44 发布

高新普惠_搬砖手

最新推荐文章于 2024-09-19 00:05:44 发布

阅读量491

点赞数

分类专栏： css 文章标签： css div xhtml path html url

本文链接：https://blog.csdn.net/dananhai381/article/details/6759909

版权

css 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

CSS居中问题，根据居中对象划分主要包括：DIV居中,图片居中,以及文字居中。而根据居中方向划分为：水平居中和垂直居中。

水平居中

div {margin-left: auto; margin-right: auto; }这句CSS居中的意思就是让div自己调整左右margin间隔的距离以达到水平居中的效果。这种方法的缺点是要设定容器的宽度，百分比也可接受

垂直居中

实现div的垂直居中：

通过在CSS中使用expression根据父容器的高度和宽度,来计算确定DIV的margin-left和margin-top位置，从而实现div的垂直居中

如代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<title>CSS在线-示例</title>

<style type="text/css" media=screen>

body

{

text-align: center;

}

#a

{

width: 200px;

height: 400px;

background: red;

}

#b

{

margin-top: expression((a.clientHeight-50)/2);

width: 50px;

height: 50px;

background: blue;

}

</style>

</head>

<body>

<div id="a">

<div id="b"></div>

</div>

</body>

</html>

图片垂直居中

{background: url("path") #FFF no-repeat center;}关键就在于这个Center属性，它表示让该背景图片在容器中居中。你也可以把Cener换成Top Left或者直接写上数字来调整它的位置。

文字垂直居中

用增高行距的办法实现垂直居中

#samplediv{ MARGIN-RIGHT: auto; MARGIN-LEFT: auto;  height:200px;  vertical-align:middle;  line-height:200px; }

<div id="samplediv"><p>垂直居中的文字</p></div>

代码说明：