CSS如何佈局與居中

kari發表於2019-03-17
CSS

左右佈局

可以使用雙浮動完成左右佈局效果：

  1. 子元素新增 float
  2. 父元素新增上 clearfix 類，清除浮動效果後父元素的塌陷

html 程式碼如下：

  <div class="parent clearfix">
    <div class="leftChild"></div>
    <div class="rightChild"></div>
  </div>
複製程式碼

css 程式碼如下：

clearfix::after{
  content: '';
  display: block;
  clear: both;
}
.parent{
  padding: 30px;
  background: black;
  height: 100px;
}
.leftChild{
  float: left;
  width: 50%;
  height: 100px;
  background: red;
}
.rightChild{
  float: right;
  width: 50%;
  height: 100px;
  background: green;
}
複製程式碼

效果如下：

CSS如何佈局與居中

左中右佈局

--- 使用雙浮動完成左中右佈局效果與之前用法相同，只是多一條<div>，不再演示 ---

同時也可使用絕對定位完成左中右佈局：

  1. 父元素新增position: relative;
  2. 子元素新增position: absolute;
  3. 子元素使用top: $px; botton: $px; left: $px; right: $px;進行定位

html 程式碼如下：

<div class="parent">
    <div class="leftChild"></div>
    <div class="middleChild"></div>
    <div class="rightChild"></div>
  </div>
複製程式碼

css 程式碼如下：

.parent{
  padding: 30px;
  background: black;
  height: 100px;
  position: relative;
}
.leftChild{
  width: 30%;
  height: 100px;
  background: red;
  position: absolute;
  left: 0;
}
.rightChild{
  width: 30%;
  height: 100px;
  background: green;
  position: absolute;
  right: 0;
}
.middleChild{
  width: 30%;
  height: 100px;
  background: yellow;
  position: absolute;
  left: 35%;
}
複製程式碼

效果如下：

CSS如何佈局與居中

水平居中

html 元素

塊級元素

新增 margin: 0 auto; 使其元素水平居中

html 程式碼如下：

  <div class="parent">
    <div class="child"></div>
  </div>
複製程式碼

css 程式碼如下：

.parent{
  padding: 30px;
  background: black;
  height: 100px;
}
.child{
  height: 100%;
  background: red;
  width: 20%;
  margin: 0 auto;
}
複製程式碼

效果如下：

CSS如何佈局與居中

內聯元素

新增 display: block; 轉化成塊級元素，然後按照塊級元素水平居中。

元素內容

塊級元素內容

新增 text-align: center; 使其內容水平居中

html 程式碼如下：

  <div class="parent">
    <div class="child">I'm child~</div>
  </div>
複製程式碼

css 程式碼如下：

.parent{
  padding: 30px;
  background: black;
  height: 100px;
}
.child{
  height: 100%;
  background: red;
  width: 60%;
  margin: 0 auto;
  text-align: center;
}
複製程式碼

效果如下：

CSS如何佈局與居中

內聯元素內容

新增 display: block; 轉化成塊級元素，然後按照塊級元素內容水平居中。

垂直居中

html 元素

塊級元素

新增 position: absolute; 使其元素絕對定位，再利用 top: $px; 定位

html 程式碼如下：

  <div class="parent">
    <div class="child">I'm child~</div>
  </div>
複製程式碼

css 程式碼如下：

.parent{
  padding: 30px;
  background: black;
  height: 300px;
}
.child{
  height: 50px;
  background: red;
  width: 60%;
  position: absolute;
  top: 155px;
}
複製程式碼

效果如下：

CSS如何佈局與居中

內聯元素

新增 display: block; 轉化成塊級元素，然後按照塊級元素垂直居中。

元素內容

塊級元素內容

新增 line-height: height($)px; 使其 元素內容行高 = 塊級元素高度。
html 程式碼如下：

  <div class="parent">
    <div class="child">I'm child~</div>
  </div>
複製程式碼

css 程式碼如下：

.parent{
  padding: 30px;
  background: black;
  height: 300px;
}
.child{
  height: 50px;
  background: red;
  width: 60%;
  position: absolute;
  top: 155px;
  line-height: 50px;
}
複製程式碼

效果如下：

CSS如何佈局與居中

內聯元素內容

新增 display: block; 轉化成塊級元素，然後按照塊級元素內容垂直居中。

其他小技巧

塊級元素新增 display： inline-block; 後，會發生什麼？

  • 塊級元素寬度收縮
    塊級元素不寫寬度的情況下，預設寬100%（佔據一行）。
    加入inline-block，寬度自動適合內容。

  • 塊級元素下方會產生空隙
    解決方法：新增vertical-align: top;，清除空隙效果。

相關文章