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

Mia Chevalier
Svētdiena, 2024. gada 16. jūnijs 02:17:22
HTML and CSS

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 . Ar iestatījumu vecākkonteinerā pakārtotie elementi kļūst par elastīgiem elementiem. The ī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 lai sasniegtu līdzīgus rezultātus. Piesakoties uz vecāku konteineru un , 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 un ar 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 īpašums. Šī pieeja ir īpaši efektīva iekļautiem blokiem vai iekļautiem elementiem. Piesakoties 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 ī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.

  1. Kā centrēt iekļauto elementu?
  2. Izmantot uz vecākkonteinera, lai centrētu iekļautos elementus.
  3. Vai varu izmantot piemali: auto; centrēt bloka elementu?
  4. Jā, iestatījums kreisajā un labajā pusē centrēs bloka elementu.
  5. Kāda ir atšķirība starp Flexbox un Grid centrēšanai?
  6. tiek izmantots viendimensijas izkārtojumiem, savukārt ir paredzēts divdimensiju izkārtojumiem.
  7. Kā centrēt fiksēta platuma elementu, izmantojot CSS?
  8. Izmantot vai ar
  9. Vai ar Flexbox var centrēt elementus vertikāli?
  10. Jā, izmantojiet centrēt elementus vertikāli elastīgā traukā.
  11. Vai teksta līdzināšana: centrs; darbs bloku elementiem?
  12. Nē, darbojas tikai iekļautiem vai iekļautiem bloka elementiem.
  13. Kā konteinerā centrēt vairākus elementus?
  14. Izmantot ar un
  15. Kas ir vieta-elementi: centrs; režģī?
  16. 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ā , , vai 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ā , , un Ī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.