1. 首页>动态要闻 > 信息

div怎么把矩形居中

作者:金龙东
2020-05-29
信息

1. 如何让图片在div里左右居中,上下居中

<style>

#box{width:500px;height:500px;position:relative;}

#box img{width:100px;height:100px;position:absolute;top:50%;left:50%;margin-top:-50px;margin-left:-50px}

</style>

<div id="box">

<img src="xxx.jpg">

</div>

原理是图片定位距离容器的上边和左边各50%,然后用margin-top和margin-left再减去图片的一半,,这就是容器的正中间的,就是水平垂直居中了。

2. css 里面怎么让一个DIV居中

你是要水平居中还是垂直居中?水平居中:<style>.juzhong{margin:0px auto; width:500px;}</style>垂直居中:<style>#mid{ position:absolute; top:50%; left:50%; margin:-150px 0 0 -150px; width:300px; height:300px; border:1px solid red; } </style> 注意,其中margin:-150px 0 0 -150px; 第一个150是高度的一半,第四个150是宽度的一半。

3. CSS中怎么让DIV居中

主要css代码有两个:

1,text-align:center

2,margin:0 auto;

其两个样式需要配合使用才能实现div盒子的居中显示排版。

首先我们对body设置text-align:center,再对需要居中的div盒子设置css样式margin:0 auto,这样即可让对应div水平居中。

举个例子,居中代码为:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "1/DTD/xhtml1-transitional.dtd">

<html xmlns="">

<head>

<meta ; charset=gb2312" />

<title>CSS使div居中制作</title>

<style>

body{ text-align:center}

#nav{ margin:0 auto; width:200px; height:150px; border:5px double #FF0066;}

</style>

</head>

<body>

<div id="nav">

DIV居中

</div>

</body>

</html>

为了观察div居中效果,我们对div设置一个div命名为“#div”在html中div标签内使用id=“nav”,设置其宽度为200px;高度为150px,边框也设置了颜色。

效果如图:

以上就是CSS让DIV居中的方法。

推荐阅读
  • 日照好玩的地方和吃海鲜应该去哪听说日

    日照好玩的地方:万平口:"旅游来日照,必到万平口",已成为各地游客的共识。刘家湾赶海园:以赶海系列活动为主,集旅游、休闲、度假、民俗、健身于一体的综合旅游园。竹洞天:位于山东省日照市城区西端的将帅沟毛竹…

    信息 2024-06-26
  • 什么是铸造

    铸造是指将室温中为液态,但不久后将要固态化的物质倒入特定形状的铸模待其凝固成形的加工方式。 被铸物质多半原为固态但加热至液态的金属(例:铜、铁、铝、锡、铅等),而铸模的材料可以是沙、金属甚至陶瓷。 因应…

    信息 2024-06-26
  • 变形金刚中博派和狂派各有哪些人物

    博派:擎天柱,铁皮,大黄蜂,爵士,棘齿。狂派:威震天,红蜘蛛,眩晕,吵闹,萨克,碎骨魔,路障,迷乱。…

    信息 2024-06-26
  • 一平方毫米的铜线能过多少安的电流

    1平方毫米的铜线在不同电流下通过的安培数不同。最大是18A:(1)60A以下,选1平方毫米的铜线安全载流量是6A;(2)60~100A,选1平方毫米的铜线,安全载流量是5A;(3)100A以上,选1平方毫米的铜线,安全载流量是2.5A 。…

    信息 2024-06-26
  • 中华人民共和国城乡规划法第四十条有规

    自2008年1月1日起施行的《中华人民共和国城乡规划法》第四十条:在城市、镇规划区内进行建筑物、构筑物、道路、管线和其他工程建设的,建设单位或者个人应当向城市、县人民政府城乡规划主管部门或者省、自治区、直辖…

    信息 2024-06-26