Kā horizontāli centrēt divdaļu, izmantojot CSS

Kā horizontāli centrēt divdaļu, izmantojot CSS
Kā horizontāli centrēt divdaļu, izmantojot CSS
Mia Chevalier
Svētdiena, 2024. gada 16. jūnijs 02:17:22

Divu līdzināšanas apgūšana ar CSS

Elementu centrēšana horizontāli CSS ir izplatīts uzdevums, ar ko saskaras tīmekļa izstrādātāji. Neatkarīgi no tā, vai tā ir pogas, attēla vai divzīmes līdzināšana, perfekta līdzinājuma sasniegšana dažkārt var būt sarežģīta. Šajā rokasgrāmatā mēs izpētīsim dažādas metodes, lai horizontāli centrētu a

cita ietvaros
izmantojot CSS.

Izprotot un pielietojot šīs metodes, jūs varat nodrošināt, ka jūsu tīmekļa elementi tiek novietoti tieši tur, kur vēlaties. Mēs apskatīsim dažādas pieejas, tostarp flexbox, režģi un tradicionālās metodes, lai sniegtu jums visaptverošu izpratni par šo būtisko CSS prasmi.

Pavēli Apraksts
display: flex; Definē elastīgu konteineru un iespējo flexbox izkārtojumu.
justify-content: center; Centrē vienumus horizontāli elastīgā konteinerā.
align-items: center; Centrē vienumus vertikāli elastīgā konteinerā.
place-items: center; Centrē vienumus gan horizontāli, gan vertikāli režģa konteinerā.
transform: translate(-50%, -50%); Pārbīda elementu par 50% no tā platuma un augstuma, lai to centrētu.
position: absolute; Pozicionē elementu attiecībā pret tā tuvāko pozicionēto priekšteci.
top: 50%; Novieto elementu 50% no tā saturošā elementa augšdaļas.
left: 50%; Novieto elementu 50% no tā saturošā elementa kreisās puses.

Elementu centrēšana, izmantojot Flexbox, Grid un tradicionālo CSS

Pirmais skripts parāda, kā centrēt a

izmantojot Flexbox. Ar iestatījumu display: flex; vecākkonteinerā pakārtotie elementi kļūst par elastīgiem elementiem. The justify-content: center; īpašums centrē šos vienumus horizontāli, kamēr align-items: center; centrē tos vertikāli. Šī metode ir ļoti daudzpusīga un labi darbojas dinamiskos izkārtojumos.

Otrajā skriptā mēs izmantojam CSS Grid lai sasniegtu līdzīgus rezultātus. Piesakoties display: grid; uz vecāku konteineru un place-items: center;, bērnu elementi ir centrēti gan horizontāli, gan vertikāli. Šī metode ir īpaši noderīga uz režģi balstītiem izkārtojumiem. Visbeidzot, tradicionālā metode ietver iestatīšanu position: absolute; par bērna elementu un izmantošanu top: 50%; un left: 50%; ar transform: translate(-50%, -50%); lai centrētu to vecāku iekšienē. Šī pieeja ir efektīva fiksēta izmēra elementiem.

Izmantojot Flexbox, lai horizontāli centrētu dalījumu

HTML un CSS ar Flexbox

<!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>

Div centrēšana ar CSS režģi

HTML un CSS ar režģa izkārtojumu

<!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>

Tradicionālā centrēšanas metode ar CSS

HTML un CSS ar 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>

Uzlabotas metodes elementu centrēšanai

Vēl viena metode elementu horizontālai centrēšanai konteinerā ietver izmantošanu text-align: center; īpašums. Šī pieeja ir īpaši efektīva iekļautiem blokiem vai iekļautiem elementiem. Piesakoties text-align: center; uz vecāku konteineru, visi pakārtotie elementi tiks centrēti horizontāli. Tomēr šī metode nedarbojas bloka līmeņa elementiem, ja vien tie nav pārveidoti par iekļautiem blokiem.

Turklāt jūs varat izmantot margin: auto; īpašība bloka līmeņa elementu centrēšanai. Iestatot elementa kreiso un labo malu uz automātisku, varat to horizontāli centrēt tā vecākkonteinerā. Šis paņēmiens ir vienkāršs un labi darbojas fiksēta platuma elementiem. Apvienojot šīs metodes ar modernām CSS izkārtojuma metodēm, piemēram, Flexbox un Grid, tiek nodrošināts visaptverošs rīku komplekts elementu precīzai izlīdzināšanai pēc vajadzības.

Bieži uzdotie jautājumi un atbildes par centrēšanas elementiem

  1. Kā centrēt iekļauto elementu?
  2. Izmantot text-align: center; uz vecākkonteinera, lai centrētu iekļautos elementus.
  3. Vai varu izmantot piemali: auto; centrēt bloka elementu?
  4. Jā, iestatījums margin: auto; kreisajā un labajā pusē centrēs bloka elementu.
  5. Kāda ir atšķirība starp Flexbox un Grid centrēšanai?
  6. Flexbox tiek izmantots viendimensijas izkārtojumiem, savukārt Grid ir paredzēts divdimensiju izkārtojumiem.
  7. Kā centrēt fiksēta platuma elementu, izmantojot CSS?
  8. Izmantot margin: auto; vai position: absolute; ar transform: translate(-50%, -50%);
  9. Vai ar Flexbox var centrēt elementus vertikāli?
  10. Jā, izmantojiet align-items: center; centrēt elementus vertikāli elastīgā traukā.
  11. Vai teksta līdzināšana: centrs; darbs bloku elementiem?
  12. Nē, text-align: center; darbojas tikai iekļautiem vai iekļautiem bloka elementiem.
  13. Kā konteinerā centrēt vairākus elementus?
  14. Izmantot display: flex; ar justify-content: center; un align-items: center;
  15. Kas ir vieta-elementi: centrs; režģī?
  16. place-items: center; centrē vienumus gan horizontāli, gan vertikāli režģa konteinerā.
  17. Vai ir iespējams centrēt elementus bez Flexbox vai Grid?
  18. Jā, izmantojot tādas metodes kā margin: auto;, text-align: center;, vai position: absolute; var arī centrēt elementus.

CSS centrēšanas metožu apkopošana

Lai izveidotu vizuāli pievilcīgus tīmekļa izkārtojumus, ir svarīgi saprast, kā centrēt elementus horizontāli, izmantojot dažādas CSS metodes. Apgūstot tādas tehnikas kā Flexbox, Grid, un traditional CSS Īpašības, izstrādātāji var nodrošināt, ka viņu dizaini ir gan funkcionāli, gan estētiski pievilcīgi. Eksperimentējot ar šīm metodēm, tiks nodrošināta dziļāka izpratne par CSS iespējām.