如何居中

最新推荐文章于 2021-08-17 20:27:49 发布

Love小马

最新推荐文章于 2021-08-17 20:27:49 发布

阅读量784

点赞数

分类专栏： css 文章标签：盒子居中元素居中嵌套元素居中

本文链接：https://blog.csdn.net/u012964083/article/details/16968967

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

让页面上的内容居中显示如图

方法一：

首先设置一个大的Div=“wrapper” .wrapper{ width:720px;margin:0 auto;}将大Div的左右外边距设置自动让其居中。

wrapper中包含一个头Div="header"和6个小Div="entry"

header中包含一个img元素和一个p元素。.header{margin:0 auto;text-align:center;}即可将图片和段落居中。

6个小的Div="entry" 每个Div中包含一个img元素和一个p元素。

.entry {
width: 220px;
float: left;
margin: 10px;
height: 198px;
text-align：center；}

整个大Div="wrapper"的宽度720px；每个小的Div="entry"宽度220px；加上margin60px；刚好720px；

利用float: left;将图片横排列，利用text-align：center；将图片居中。

整个例子的代码：

<!DOCTYPE html>
<html>
<head>
<title>Images</title>
<style type="text/css">
body {
color: #665544;
background-color: #d4d0c6;
background-image: url("images/backdrop.gif");
font-family: Georgia, "Times New Roman", serif;
text-align: center;}
.wrapper {
width: 720px;
margin: 0px auto;}
.header {
margin: 40px 0px 20px 0px;}
.entry {
width: 220px;
float: left;
margin: 10px;
height: 198px;
background-image: url("images/shadow.png");
background-repeat: no-repeat;
background-position: bottom;}
figure {
display: block;
width: 202px;
height: 170px;
background-color: #e7e3d8;
margin: 0px;
padding: 9px;
text-align: left;}
figure img {
width: 200px;
height: 150px;
border: 1px solid #d6d6d6;}
figcaption {
background-image: url("images/icon.png");
padding-left: 20px;
background-repeat: no-repeat;}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
<img src="images/title.gif" alt="Galerie Botanique" width="456" height="122" />
<p>Here is a selection of antique botanical prints held in our collection.</p>
</div>
<div class="entry">
<figure><img src="images/print-01.jpg" alt="Helianthus" />
<figcaption>Helianthus</figcaption>
</figure>
</div>
<div class="entry">
<figure><img src="images/print-02.jpg" alt="Passiflora" />
<figcaption>Passiflora</figcaption>
</figure>
</div>
<div class="entry">
<figure><img src="images/print-03.jpg" alt="Nyctocalos" />
<figcaption>Nyctocalos</figcaption>
</figure>
</div>
<div class="entry">
<figure><img src="images/print-04.jpg" alt="Polianthes" />
<figcaption>Polianthes</figcaption>
</figure>
</div>
<div class="entry">
<figure><img src="images/print-05.jpg" alt="Ficus" />
<figcaption>Ficus</figcaption>
</figure>
</div>
<div class="entry">
<figure><img src="images/print-06.jpg" alt="Dendrobium" />
<figcaption>Dendrobium</figcaption>
</figure>
</div>
</div>
</body>
</html>

方法二：上面的这种方法是放小图片的六个小的Div="entry"的宽度都是 220px；加上每个Div="entry"的外边距是10px；刚好沾满了整个大的Div。如果宽度没有这么干好合适，整个大的Div的宽度是900px，那上面的方法是居中不了的。

这时就在header的下面平行放两个Div Div="rowOne" Div="rowTwo"

rowOne{
float:left;
width:720px；
margin：0px auto；

}
Div="rowOne"有3个小的Div="rowOneImage" 中包含一个img元素 一个p元素
.rowOneImage{
margin:10px;
text-align:center;}就可以居中图片了。

rowTwo{
float:left;
width:720px；
margin：0px auto；

}
Div="rowTwo"有3个小的Div="rowTwoImage"
.rowTwoImage{
margin:10px;
text-align:center;}