CSS的布局与居中

最新推荐文章于 2024-04-12 01:45:06 发布

simdim

最新推荐文章于 2024-04-12 01:45:06 发布

阅读量9.1k

点赞数 2

1.左右布局

给两个div添加 float: left;属性

  <body>
    <div style="border:5px solid red;float:left"> 第一个div</div>
    <div style="border:5px solid pink;float:left">第二个div</div>
  </body>

效果

这里写图片描述
设置一个左浮动，一个右浮动

  <body>
    <div style="border:5px solid red;;float:left"> 第一个div</div>
    <div style="border:5px solid pink;;float:right">第二个div</div>
  </body>

效果
这里写图片描述

2.给两个div添加display:inline属性

  <body>
    <div style="border:5px solid red;;display:inline"> 第一个div</div>
    <div style="border:5px solid pink;;display:inline">第二个div</div>
  </body>

效果
这里写图片描述

2.左中右布局

1.使用float

两边固定宽度，中间宽度自适应
利用中间元素的margin值控制两边的间距
宽度小于左右部分宽度之和时，右侧部分会被挤下去

<style>
    .left {width: 200px; height: 50px; float: left; background: red;}
    .right {width: 150px; height: 50px; float: right; background: blue;}
    .middle {margin-left: 210px;height: 50px; background:pink; margin-right:160px;}
</style>
<body>
    <div class="left">左侧</div>
    <div class="right">右侧</div>
    <div class="middle">中间</div>
<body/>

效果
这里写图片描述

2.使用position绝对定位

缺点：有顶部对齐问题，需要进行调整，注意中间的高度为整个内容的高度

<style>
    .left {width: 200px; height: 100px; position: absolute; top: 0; left: 0; background:red;}
    .right {width: 150px; height: 100px; position: absolute; top:0; right: 0; background: blue;}
    .middle {margin: 0 160px 0 210px; height: 100px;  background: pink;}
</style>
<body>
    <div class="left">左侧</div>
    <div class="right">右侧</div>
    <div class="middle">中间</div>
<body/>

效果
这里写图片描述

3.使用flex

仅需将父元素设置为display:flex;，盒内元素两端对其，将中间元素设置为100%宽度即可填充空白，再利用margin值设置边距即可
并且盒内元素的高度撑开容器的高度

<style>
    .wrap {display: flex;}
    .left, .right, .middle {height: 100px;}
    .left {width: 200px; background: red;}
    .right {width: 150px; background: blue;}
    .middle {background: pink; width: 100%; margin: 0 40px;}
</style>
<body>
<div class="wrap">
    <div class="left">左侧</div>
    <div class="middle">中间</div>
    <div class="right">右侧</div>
</div>
</dody>

效果
这里写图片描述

3.水平居中

常用行内元素为a/img/input/span 等，标签内的HTML文本也属于此类。对于此类情况，水平居中是通过给父元素设置 text-align:center来实现的

<body>
  <div style="text-align:center;">
    Hello World
  </div>
</body>

常用块级元素为div/table/ul/dl/form/h1/p等,根据应用场景不同又分为定宽块级与不定宽块级两种情况，分别讨论。

1.定宽块级元素

满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的

<style>
  div{
    width:500px;/*定宽*/
    margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
  }
</style>
<body>
  <div>
    Hello World
  </div>
</body>

2.不定宽块级元素

我们经常会遇到不定宽度块级元素的使用，如分页导航，因为分页的数目不定，所以不能用宽度限制住。此时对元素进行水平居中主要有三种方式
加入 table 标签
设置 display;inline 方法
设置 position:relative 和 left:50%;

1.加入 table 标签

第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )
第二步：为这个 table 设置“左右 margin:auto”

<style>
  table{
    margin:0 auto;
  }
  ul{list-style:none;margin:0;padding:0;}
  li{float:left;display:inline;margin-right:8px;}
  </style>

<div>
  <table>
    <tbody>
      <tr><td>
        <ul>
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
        </ul>
      </td></tr>
    </tbody>
  </table>
</div>

这种方法的缺点是增加了无语义的HTML标签，增加了嵌套深度

2.设置 display:inline 方法

改变块级元素的 dispaly 为 inline 类型，然后使用 text-align:center 来实现居中效果

<style>
  .container{
    text-align:center;
  }
  .container ul{
    list-style:none;
    margin:0;
    padding:0;
    display:inline;
  }
  .container li{
    margin-right:8px;
    display:inline;
  }
</style>
<body>
  <div class="container">
    <ul>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
    </ul>
  </div>
</body>

这种方法的缺点是将块级元素的display设置为inline，于是少了很多功能，比如盒子模型

3.设置 position:relative 和 left:50%;

通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%,给子元素设置 position:relative 和 left:-50% 来实现水平居中。

<style>
  .container{
    float:left;
    position:relative;
    left:50%
  }
  .container ul{
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    left:-50%;
  }
  .container li{float:left;display:inline;margin-right:8px;}
</style>
<body>
  <div class="container">
    <ul>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
    </ul>
  </div>
</body>

这种方法可以保留块状元素仍以 display:block 的形式显示，优点不添加无语议表标签，不增加嵌套深度，但它的缺点是设置了 position:relative，带来了一定的副作用。

4.垂直居中

1.常规元素的垂直居中

容器内元素display:inline/inline-block
这种情况就比较容易了，直接设置容器的text-align就可以实现内容元素的水平居中，设置垂直居中的话要设置容器的高度，然后设置容易的line-height==height就可以，如下：

<style>  
  .container{
    text-align: center;
    height: 50px;
    line-height: 50px;
  }
</style>

 <div class="container">
     <span>我要居中</span>
 </div>

2.容器内元素display:block且元素宽高已知

这种情况下我们使用position这个属性结合设置偏移来实现。
首先设置容器的position:relative,设置元素position为absolute
然后设置元素的偏移top,left,margin-top,margin-left，其中top，left设置为50%,而margin-top/margin-left的偏移量均为本身元素高/宽的一半，为负值。

<style> 
    container {
        height: 200px;
        width: 200px;
        background: pink;
        position: relative;
    }
    inner-box {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -50px;
        margin-left: -50px;
        height: 100px;
        width: 100px;
        background: green;
    }
  </style>

<div class="container">
        <div class="inner-box"></div>
    </div>

3.容器内元素display:block,且元素宽高未知

这种方法与方法二类似，但是不同的是不能通过设置margin-top/left偏移来达到效果了，因为容器内元素的宽高是未知的。这次通过设置left/top/bottom/right:0,然后设置margin:auto

<style> 
    .container {
            height: 200px;
            width: 200px;
            background: pink;
            position: relative;
        }

    .inner-box {
        position: absolute;
        height: 100px;
        width: 100px;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        margin: auto;
        background: green;
    }
  </style>

<div class="container">
        <div class="inner-box"></div>
    </div>

小技巧

子元素加了浮动，务必在该父元素上加上 clearfix

.clearfix::after{
    content: '';
    display: block;
    clear: both;
}

可以使用nth-child(##)来选中特定元素
合理使用margin的负值
合理使用max-width属性
给标签加上border:1px solid red;便于调试
如果子元素的宽度为100%，那么就是父元素的宽度
加了display:inline-block；务必加vertical-align:top
熟悉各种工具的使用
-

simdim

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
CSS的布局与居中

1.左右布局给两个div添加 float: left;属性 &lt;body&gt; &lt;div style="border:5px solid red;float:left"&gt; 第一个div&lt;/div&gt; &lt;div style="border:5px solid pink;float:left"&gt;第二个div&lt;/div&amp
复制链接

扫一扫