CSS常見佈局與居中

南屋流星發表於2018-12-10
CSS

這裡，就CSS左右佈局，左中右佈局，水平與垂直居中，進行討論。

CSS常用於控制頁面佈局的定位機制：
普通流、相對定位、絕對定位和固定定位。還可以使用float屬性來讓元素浮動。

1.左右佈局

最常用的就是通過浮動（左浮或右浮）來實現浮動。
float屬性允許你將普通流中的元素在它的包含元素內儘可能的向左或向右排列。
你應該設定margin屬性來制定浮動元素之間的間距。

不同元素的高度和寬度不同，為防止浮動元素的後一元素自動上浮，可以為父元素賦予clearfix類來清除浮動解決這一問題。

<div class="parent clearfix">
  <div class="descendant1">left</div>
  <div class="descendant2">right</div>
</div>

同時在CSS中關於偽類作出宣告：

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

設定左浮動（或右浮動），將兩個子元素左右並排實現佈局：

.descendant1,
.descendant1 {
  float: left;
  margin-left: 30px;
}

還可以通過絕對定位,通過元素脫離文件流來實現。

<div class="parent">
  <div class="descendant1">left</div>
  <div class="descendant2">right</div>
</div>
.parent {
  position: relative;
}
.descendant1 {
  position: absolute;
  left: 0;
  top: 0;
}
.descendant2 {
  position: absolute;
  left: 60px;
  top: 0;
}

2.左中右佈局

我們類比左右佈局，在此基礎上實現由兩個元素變為三個元素的佈局。

通過全部左浮（或右浮）實現：

<div class="parent clearfix">
  <div class="descendant1">left</div>
  <div class="descendant2">center</div>
  <div class="descendant3">right</div>
</div>
.descendant1,
.descendant2,
.descendant3 {
  float: left;
  margin-left: 20px;
}

同理，第一個元素左浮，第三個元素右浮；同時設定三個元素為內聯元素：

.descendant1 {
  float: left;
  margin-left: 20px;
  display: inline-block;
}
.descendant2 {
  margin-left:20px;
  display: inline-block;
}
.descendant3 {
  float: right;
  margin-right: 260px;
  display: inline-block;
}

通過絕對定位：

<div class="parent">
  <div class="descendant1">left</div>
  <div class="descendant2">center</div>
  <div class="descendant3">right</div>
</div>
.parent {
  position: relative;
}
.descendant1 {
  position: absolute;
  left: 0;
  top: 0;
}
.descendant2 {
  position: absolute;
  left: 60px;
  top: 0;
}
.descendant3 {
  position: absolute;
  left: 120px;
  top: 0;
}

3.水平居中

文字居中：

text-align: center;

如果想讓一個元素水平居中，首先確定你已經給元素設定了一個寬度（否則將溢滿整個螢幕）。
可以通過設定左右的外邊距為auto值來居中（包括圖片）。

<body>
  <p class="text">You can go to everywhere.
    <br>If you like.
  </p>
</body>
p.text {
  max-width: 300px;
  text-align: center;
  margin: 0 auto;
}

4.垂直居中

在單行文字或按鈕、小圖中的文字很使用的方法，即設定行高與元素高度一致即可。

<p class="text">
    button
</p>
p.text {
  height: 60px;
  line-height: 60px;
}

也可以根據實際需要尺寸，為所在元素設定上下的padding來實現居中:

p.text {
  padding: 15px 0;
  line-height: 60px;
}

Written by：EdenSheng
Email：singlesaulwork@gmail.com

相關文章