有一些常見(jiàn)的編碼問(wèn)題您可能會(huì)遇到當(dāng)你開(kāi)始練習(xí)你所學(xué)到的建設(shè)項(xiàng)目。

一個(gè)常見(jiàn)的問(wèn)題你將面對(duì)作為一個(gè)web開(kāi)發(fā)人員是如何將一個(gè)元素在頁(yè)面的中心或在一個(gè)元素作為它的容器。它是無(wú)處不在的“我怎么中心一個(gè)div ?”的問(wèn)題。

在本文中,我們將看到如何中心元素使用不同的CSS屬性。每一節(jié)中我們將看到代碼示例和可視化表示元素的所有的例子。

如何使用CSS中心一個(gè)Div Flexbox

在本節(jié)中,我們將看到如何使用CSS Flexbox屬性中心元素水平,垂直,在頁(yè)面/容器的中心。

如果你喜歡你可以使用一個(gè)圖像,但我們將只使用一個(gè)簡(jiǎn)單的循環(huán)使用CSS。這是代碼:

<div class="container">
      <div class="circle">
      </div>
</div>

.container {
  width: 500px;
  height: 250px;
  margin: 50px;
  outline: solid 1px black;
}
.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: black;
}

定位與Flexbox要求我們寫(xiě)的代碼在父或容器元素的類。

如何使用Flexbox中心一個(gè)Div水平

現(xiàn)在我們將編寫(xiě)代碼中心div元素水平。我們還利用我們上面創(chuàng)建的圈子。

.container {
  width: 500px;
  height: 250px;
  margin: 50px;
  outline: solid 1px black;
  display: flex;
  justify-content: center;
}
.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: black;
}

我們?cè)黾恿藘尚写a中心水平圓。這些是我們添加的行:

display: flex;
justify-content: center;

顯示:flex;允許我們使用Flexbox和它的屬性,而justify-content:中心;水平對(duì)齊圓中心。

這是我們的位置循環(huán):

如何使用Flexbox中心一個(gè)Div垂直

我們將會(huì)做什么在這一節(jié)中類似于最后一個(gè),除了一行代碼。

.container {
  width: 500px;
  height: 250px;
  margin: 50px;
  outline: solid 1px black;
  display: flex;
  align-items: center;
}
.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: black;
}

在這個(gè)例子中,我們使用對(duì)齊項(xiàng)目:中心;中心圓垂直?；叵胍幌?我們被要求寫(xiě)顯示:flex;先指定的方向。

這是我們的圓的位置:

如何定位一個(gè)Div中心使用Flexbox

在本節(jié)中,我們將在頁(yè)面的中心位置圓使用CSS Flexbox的水平和垂直對(duì)齊屬性。方法如下:

.container {
  width: 500px;
  height: 250px;
  margin: 50px;
  outline: solid 1px black;
  display: flex;
  justify-content: center;
  align-items: center;
}
.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: black;
}

以下是我們的三行代碼添加到容器類上圖:

display: flex;
justify-content: center;
align-items: center;

正如所料,我們首先顯示:flex;它允許我們使用Flexbox CSS。我們?nèi)缓笫褂胘ustify-content水平對(duì)齊,對(duì)齊項(xiàng)目(垂直對(duì)齊)屬性位置圓的中心頁(yè)面。

這是我們的位置循環(huán):

如何使用CSS保證金水平中心一個(gè)Div財(cái)產(chǎn)嗎

在本節(jié)中,我們將使用保證金財(cái)產(chǎn)中心水平圓。

讓我們創(chuàng)建我們的圓。

<div class="container">
      <div class="circle">
      </div>
</div>

.container {
  width: 500px;
  height: 250px;
  margin: 50px;
  outline: solid 1px black;
}
.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: black;
}

這一次我們將圓類中編寫(xiě)代碼。方法如下:

.container {
  width: 500px;
  height: 250px;
  margin: 50px;
  outline: solid 1px black;
}
.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: black;
  margin: 0 auto;
}

我們已經(jīng)添加了保證金:0汽車;行代碼圓類。

讓我們看一看圓的位置:

如何使用CSS文本水平居中text-align財(cái)產(chǎn)嗎

在本節(jié)中,我們將看到如何使文字水平居中。

這種方法只能當(dāng)我們正在與文字寫(xiě)在一個(gè)元素。

這是一個(gè)例子:

<div class="container">
    <h1>Hello World!</h1>      
</div>

在上面的示例中,我們創(chuàng)建了一個(gè)類的div容器和一個(gè)h1元素和一些文本。這是此刻的樣子:

讓我們編寫(xiě)CSS代碼。

.container {
  width: 500px;
  height: 250px;
  margin: 50px;
  outline: solid 1px black;
}
h1 {
  text-align: center;
}

在其他一致h1元素中的文本在頁(yè)面的中心,我們不得不使用text-align屬性,給它一個(gè)中心的價(jià)值。這就是它看起來(lái)像現(xiàn)在在瀏覽器中:

結(jié)論

在本文中,我們看到了如何中心元素水平,垂直,在頁(yè)面的中心使用Flexbox保證金和text-align CSS屬性。