CSS 对齐

最新推荐文章于 2023-12-21 20:06:30 发布

倾城磊卿

最新推荐文章于 2023-12-21 20:06:30 发布

阅读量745

点赞数

分类专栏：前端文章标签： css html5 html

本文链接：https://blog.csdn.net/qq_51359038/article/details/120189705

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS 布局 - 水平和垂直对齐

居中对齐元素

要使块元素（例如 <div> ）水平居中，请使用 margin: auto;。

设置元素的宽度将防止其延伸到容器的边缘。

然后，元素将占用指定的宽度，剩余空间将在两个外边距之间平均分配

注意：如果未设置 width 属性（或将其设置为 100％），则居中对齐无效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .juzhong{
            width:40%;
            /* 注意：如果未设置 width 属性（或将其设置为 100％），则居中对齐无效 */
            margin:auto;
            padding:20px;
            border:1px solid black;
            text-align: center;
        }

    </style>
</head>
<body>
    <div class="juzhong">
        这里是使用margin:auto达到水平居中
    </div>
</body>
</html>

居中对齐图像

需设置为块元素，并将左右外边距设为margin:auto

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像居中对齐</title>
    <style>
        img{
            display:block;
            width:400px;
            height:200px;
            margin:auto;
        }
    </style>
</head>
<body>
    <img src="壁纸2.png" >
</body>
</html>

左和右对齐-使用position

对齐元素的一种方法是使用position:absolute

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>position左和右对齐</title>
    <style>
        .left{
            position:absolute;
            left:0px;
            width:100px;
            padding:10px;
            border:1px solid black;
        }
        .right{
            position:absolute;
            right:0px;
            width:100px;
            padding:10px;
            border:1px solid black;
        }
    </style>
</head>
<body>
    
    <div class="left">这是position左对齐</div>
    <div class="right">这是position右对齐</div>
</body>
</html>
<!-- 注意：绝对定位的元素将从正常流中删除，并可能出现元素重叠。 -->

左和右对齐 - 使用 float

对齐元素的另一种方法是使用 float 属性：

<!DOCTYPE html>
<html>
<head>
<style>
.right {
  float: right;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}
</style>
</head>
<body>

<h1>右对齐</h1>

<p>如何使用 float 属性将元素右对齐的例子：</p>

<div class="right">
  <p>在我更年轻，更脆弱的岁月中，父亲给了我一些建议，从那以后我就一直在思考。</p>
</div>

</body>
</html>

clearfix Hack

然后我们可以向包含元素添加 overflow: auto;，来解决此问题：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 3px solid #4CAF50;
  padding: 5px;
}

.img1 {
  float: right;
}

.clearfix {
  overflow: auto;
}

.img2 {
  float: right;
}
</style>
</head>
<body>

<h1>Clearfix</h1>

<p>在本例中，图像高于包含它的元素，然而它被浮动了，所以它会在容器之外溢出：</p>

<div>
  <img class="img1" src="/i/logo/w3logo-3.png" alt="W3School" width="180" height="167">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
</div>

<p style="clear:right">请为包含元素添加一个带有 overflow: auto; 的 clearfix 类，以解决此问题：</p>

<div class="clearfix">
  <img class="img2" src="/i/logo/w3logo-3.png" alt="W3School" width="180" height="167">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
</div>

</body>
</html>

使用padding设置上下内边距来实现垂直对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>padding垂直对齐</title>
   <style>
       div{
           padding:10px 0;
           border:1px solid black;
           /* 垂直和水平都对齐加text-align:center; */
           text-align: center;
       }
   </style>
</head>
<body>
    <div>
        这里是padding垂直对齐
    </div>
</body>
</html>

垂直对齐 - 使用 line-height

另一个技巧是使用其值等于 height 属性值的 line-height 属性

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  line-height: 200px;
  height: 200px;
  border: 3px solid green;
  text-align: center;
}

.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}
</style>
</head>
<body>

<h1>居中</h1>

<p>在此例中，我们使用 line-height 属性，其值等于 height 属性，以使 div 元素居中：</p>

<div class="center">
  <p>我是垂直和水平居中。</p>
</div>

</body>
</html>

垂直对齐 - 使用 position 和 transform

如果选择不是 padding 和 line-height，则另一种解决方案是使用 position 和 transform 属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div{
            height:100px;
            position:relative;
            border:1px solid black;
        }
        .div p{
            margin:0;
            position:absolute;
            top:50%;
            left:50%;
          -moz-transform:translate(-50%,-50%);
          -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);

        }
    </style>
</head>
<body>
    <div class="div">
        <p>这里是垂直对齐</p>
    </div>
</body>
</html>

垂直对齐 - 使用 Flexbox

还可以使用 flexbox 将内容居中。请注意，IE10 以及更早的版本不支持 flexbox：

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green; 
}
</style>
</head>
<body>

<h1>弹性框</h1>

<p>同时将 justify-content 和 align-items 属性设置为 <em>center</em> 的容器将使项目在中心（在两个轴上）对齐。</p>

<div class="center">
  <p>我同时在水平和垂直方向对齐。</p>
</div>

</body>
</html>

倾城磊卿

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS 对齐

CSS布局-水平和垂直对齐居中对齐元素要使块元素（例如<div>）水平居中，请使用margin:auto;。设置元素的宽度将防止其延伸到容器的边缘。然后，元素将占用指定的宽度，剩余空间将在两个外边距之间平均分配注意：如果未设置width属性（或将其设置为100％），则居中对齐无效<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-...
复制链接

扫一扫