Divisioonan vaakasuora keskitys CSS:n avulla

Mia Chevalier
Sunnuntai 16. kesäkuuta 2024 klo 1.51.07
HTML and CSS

Divisioonan kohdistuksen hallitseminen CSS:n kanssa

Elementtien keskittäminen vaakasuoraan CSS:ssä on yleinen tehtävä, jonka verkkokehittäjät kohtaavat. Olipa kyseessä painikkeen, kuvan tai div-kohdan kohdistaminen, täydellisen kohdistuksen saavuttaminen voi joskus olla hankalaa. Tässä oppaassa tutkimme erilaisia ​​tapoja keskittää a

toisen sisällä
CSS:n avulla.

Ymmärtämällä ja soveltamalla näitä tekniikoita voit varmistaa, että verkkoelementit sijoitetaan juuri haluamaasi paikkaan. Käsittelemme erilaisia ​​lähestymistapoja, mukaan lukien flexbox, grid ja perinteiset menetelmät, jotta saat kattavan käsityksen tästä tärkeästä CSS-taidosta.

Komento Kuvaus
display: flex; Määrittää joustavan säiliön ja mahdollistaa flexbox-asettelun.
justify-content: center; Keskittää kohteet vaakasuoraan joustavaan säiliöön.
align-items: center; Keskittää kohteet pystysuoraan joustavaan säiliöön.
place-items: center; Keskittää kohteet sekä vaaka- että pystysuunnassa ruudukkosäiliöön.
transform: translate(-50%, -50%); Siirtää elementtiä 50 % sen leveydestä ja korkeudesta keskittääkseen sen.
position: absolute; Sijoittaa elementin suhteessa sen lähimpään sijoittuvaan esi-isään.
top: 50%; Sijoittaa elementin 50 %:n päähän sen sisältävästä elementistä.
left: 50%; Sijoittaa elementin 50 % sen sisältävän elementin vasemmalle puolelle.

Elementtien keskitys Flexboxilla, Gridillä ja perinteisellä CSS:llä

Ensimmäinen skripti näyttää kuinka keskitetään a

käyttämällä . Asettamalla pääsäiliössä alielementeistä tulee joustavia kohteita. The ominaisuus keskittää nämä kohteet vaakasuoraan, kun taas align-items: center; keskittää ne pystysuoraan. Tämä menetelmä on erittäin monipuolinen ja toimii hyvin dynaamisissa asetteluissa.

Toisessa skriptissä käytämme samanlaisten tulosten saavuttamiseksi. Hakemalla pääsäilöön ja , lapsielementit on keskitetty sekä vaaka- että pystysuunnassa. Tämä menetelmä on erityisen hyödyllinen ruudukkopohjaisissa asetteluissa. Lopuksi perinteinen menetelmä sisältää asettamisen position: absolute; lapsielementistä ja käytöstä ja kanssa keskittää se vanhemman sisällä. Tämä lähestymistapa on tehokas kiinteäkokoisille elementeille.

Flexboxin käyttäminen jaon vaakasuoraan keskittämiseen

HTML ja CSS Flexboxilla

<!DOCTYPE html>
<html>
<head>
<title>Flexbox Centering</title>
<style>
#outer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  border: 1px solid black;
}
#inner {
  padding: 20px;
  background-color: lightblue;
  border: 1px solid blue;
}</style>
</head>
<body>
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
</body>
</html>

Divin keskittäminen CSS-ruudukon avulla

HTML ja CSS ruudukkoasettelulla

<!DOCTYPE html>
<html>
<head>
<title>Grid Centering</title>
<style>
#outer {
  display: grid;
  place-items: center;
  height: 100vh;
  border: 1px solid black;
}
#inner {
  padding: 20px;
  background-color: lightgreen;
  border: 1px solid green;
}</style>
</head>
<body>
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
</body>
</html>

Perinteinen keskitysmenetelmä CSS:n avulla

HTML ja CSS ja Margin Auto

<!DOCTYPE html>
<html>
<head>
<title>Traditional Centering</title>
<style>
#outer {
  width: 100%;
  height: 100vh;
  border: 1px solid black;
  position: relative;
}
#inner {
  width: 50px;
  padding: 20px;
  background-color: lightcoral;
  border: 1px solid red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}</style>
</head>
<body>
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
</body>
</html>

Kehittyneet tekniikat elementtien keskittämiseen

Toinen menetelmä elementtien keskittämiseksi vaakasuoraan säiliön sisällä sisältää sen käytön omaisuutta. Tämä lähestymistapa on erityisen tehokas inline-lohko- tai rivielementtien kohdalla. Hakemalla ylätason säilöön, kaikki alielementit keskitetään vaakasuoraan. Tämä menetelmä ei kuitenkaan toimi lohkotason elementeillä, ellei niitä muunneta rivilohkoiksi.

Lisäksi voit käyttää ominaisuus lohkotason elementtien keskittämiseen. Asettamalla elementin vasemman ja oikean marginaalin automaattiseksi, voit keskittää sen vaakasuunnassa sen ylätason säilöön. Tämä tekniikka on yksinkertainen ja toimii hyvin kiinteäleveäisille elementeille. Näiden menetelmien yhdistäminen nykyaikaisiin CSS-asettelutekniikoihin, kuten Flexbox ja Grid, tarjoaa kattavan työkalupakin elementtien kohdistamiseen tarkasti tarpeen mukaan.

  1. Kuinka keskitän upotetun elementin?
  2. Käyttää ylätason säilössä rivielementtien keskittämiseksi.
  3. Voinko käyttää marginaalia: auto; keskittääksesi lohkoelementin?
  4. Kyllä, asetus vasemmalla ja oikealla puolella keskittää lohkoelementin.
  5. Mitä eroa on Flexboxilla ja Gridillä keskittämiseen?
  6. käytetään yksiulotteisiin asetteluihin, kun taas on tarkoitettu kaksiulotteisille asetteluille.
  7. Kuinka keskitän kiinteän leveän elementin CSS:llä?
  8. Käyttää tai kanssa
  9. Voinko keskittää elementtejä pystysuunnassa Flexboxilla?
  10. Kyllä, käytä keskittää elementit pystysuoraan joustavaan astiaan.
  11. Tasaako tekstin: center; toimiiko lohkoelementeille?
  12. Ei, toimii vain inline- tai inline-block-elementeillä.
  13. Kuinka keskitän useita elementtejä säilöön?
  14. Käyttää kanssa ja
  15. Mikä on paikkakohteet: center; Gridissä?
  16. keskittää kohteet sekä vaaka- että pystysuunnassa ruudukkosäiliöön.
  17. Onko mahdollista keskittää elementtejä ilman Flexboxia tai Gridiä?
  18. Kyllä, käyttämällä esim , , tai voi myös keskittää elementtejä.

CSS-keskitystekniikoiden päättäminen

Elementtien keskittämisen vaakasuunnassa eri CSS-menetelmien avulla on välttämätöntä luoda visuaalisesti houkuttelevia verkkoasetteluja. Hallitsemalla tekniikoita, kuten , , ja ominaisuudet, kehittäjät voivat varmistaa, että heidän suunnittelunsa ovat sekä toiminnallisia että esteettisesti miellyttäviä. Näiden menetelmien kokeileminen antaa syvemmän ymmärryksen CSS-ominaisuuksista.