整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML网页中的图形是如何对齐的?有什么方法可以使它们对齐?


许多方法可以将HTML元素与CSS对齐,但是一起使用或单独使用它们并不是那么容易。开发人员所面临的困难之一就是试图将元素集中在页面中间。

因此,在本文中,我将展示一些最常用的方法,即通过使用不同的CSS属性在水平和垂直方向上居中图像。

水平居中

让我们开始使用3个不同的CSS属性将图像水平居中。

文字对齐

使图像水平居中的第一种方法是使用text-align属性。但是,仅当图像位于块级容器(例如<div>)内时,此方法才有效:

Margin: Auto

使图像居中的另一种方法是使用margin:auto属性(用于左边距和右边距)。但是,单独使用margin:Auto将不适用于图像。如果需要使用margin:auto,则还必须使用2个其他属性。

margin-auto属性对内联级别的元素没有任何影响。由于<img>标签是一个内联元素,因此我们需要先将其转换为块级元素:

其次,我们还需要定义宽度。因此,左右边缘可以占用其余的空白空间并自动对齐,可以这样解决问题(除非我们给出100%的宽度):

Display: Flex

将图像水平居中的第三种方法是使用display:flex。同样,我们对容器使用text-align属性,它也会使用display:flex。但是,仅使用display:flex是不够的。容器还必须具有一个称为justify-content的附加属性。

justify-content属性与display:flex一起使用,我们可以使用它水平放置图像的中心。最后,图像的宽度必须小于容器的宽度,否则,它会占用100%的空间,然后我们就无法对其进行集中化。

垂直居中放置图像

1、Display: Flex

对于垂直对齐,使用display:flex确实很有帮助。考虑到我们的容器的高度为800px,但图像的高度仅为500px:

现在,在这种情况下,向容器中添加一行代码(align-items:center)就可以了:

如果将align-items属性与display:flex一起使用,就会将元素垂直放置。

2、位置:绝对和变换属性

垂直对齐的另一种方法是一起使用position和transform属性。这个有点复杂,所以让我们一步一步地做。

步骤1:定义绝对位置

首先,我们将图像的定位行为从静态更改为绝对:

同样,它应该位于相对放置的容器内,因此我们添加一个位置:相对于其容器的div。

步骤2:定义顶部和左侧属性

其次,我们定义图像的顶部和左侧属性,并设置为50%。这会将图像的起点(左上角)移到容器的中心:

步骤3:定义变换属性

在第二步的时候已经将图像的一部分移出容器。因此,我们需要将其取回内部。在图像上定义转换属性,并在其X和Y轴上添加负50%可以达到目的:

还可以使用其他方法进行水平和垂直居中,我这里只尝试了最常用的方法。希望这篇文章可以帮助你了解如何在页面中心对齐图像。

. 元素高度声明的情况下在父容器中居中:绝对居中法

<div class="parent">
 <div class="absolute-center"></div>
</div>
.parent {
 position: relative;
}
.absolute-center {
 position: absolute;
 margin: auto;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 height: 70%;
 width: 70%;
}
优点:
1.跨浏览器,包括 IE8-10
2.无需其他冗余标记,CSS 代码量少
3.完美支持图片居中
4.宽度高度可变,可用百分比
缺点:
1.必须声明高度

2. 负外边距:当元素宽度高度为固定值时。设置 margin-top/margin-left 为宽度高度一 半的相反数,top:50%;left:50%

<div class="parent">
 <div class="negative-margin-center"></div>
</div>
.parent {
 position: relative;
}
.negative-margin-center {
 position: absolute;
 left: 50%;
 top: 50%;
 margin-left: -150px;
 margin-top: -150px;
 height: 300px;
 width: 300px;
}
优点:
良好的跨浏览器特性,兼容 IE6-7
代码量少
缺点:
不能自适应,不支持百分比尺寸和 min-/max-属性设置
内容可能溢出容器
边距大小域与 padding,box-sizing 有关

3. CSS3 Transform 居中:

<div class="parent">
 <div class="transform-center"></div>
</div>
.parent {
 position: relative;
}
.transform-center {
 position: absolute;
 left: 50%;
 top: 50%;
 margin: auto;
 width: 50%;
 -webkit-transform: translate(-50%, -50%);
 -moz-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
}
优点:
内容高度可变
代码量少
缺点:
IE8 不支持
属性需要浏览器厂商前缀
可能干扰其他 transform 效果

4. table-cell 居中:

lex方法

首先给图片添加一个div,设置其宽高及基本属性,其次把div中的display元素设置成flex,最后给img添加align-items:center属性,代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style tpye="text/css">
         body{ 
            background:#000
        }
        div{
            width: 900px;
            height: 800px;
            background:deeppink;
            display: flex;
            align-items: center;
        }
        div img{
            width: 579px;
            height: 282px;
            align-items: center;
        }
    </style>
</head>
<body>
<div>
    <img src="html.png" alt="">
</div>
</body>
</html>

看下效果

display方法

首先创建一个div,以及对有图片的div设置样式,给img的父级添加一个diaplay,并且属性为table,并且把包含图片的div中的display属性设置成table-cell,最后给有图片的div设置成vertical-align: middle; 属性,代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style tpye="text/css">
        body{
            background: #bbb;
        }
        div{
            display: table;
            width: 900px;
            height: 700px;
            background: #f3f3f3;
            display: table-cell;
            vertical-align: middle;
        }
        div img{
            width: 282px;
        }
    </style>
</head>
<body>
<div>
    <img src="html.png" alt="">
</div>
</body>
</html>

效果图: