Menyelaraskan elemen dalam CSS

penjajaran CSS Demystified: Panduan Komprehensif (Bahagian 1)

Menyelaraskan unsur -unsur dalam CSS boleh mengejutkan. Mari kita mengatasi kepala ini dan belajar bagaimana untuk meletakkan unsur-unsur dengan berkesan.

---

1. Menetapkan panggung

kita akan mulakan dengan beberapa contoh html:

<code class="language-html"><div class="outer-div">
  <div class="inner-div"></div>
  <p>Initial rendering without CSS:</p>
  <img alt="Initial rendering" src="/uploads/20250128/173802269967981f2bdc9c3.jpg" loading="lazy">
  <p>Adding CSS for improved styling:</p>
  <img alt="Improved styling" src="/uploads/20250128/173802270067981f2c02601.jpg" loading="lazy">
  <p>This is a basic example.</p>
</div></code>

dan CSS yang sepadan:

<code class="language-css">.outer-div {
  /* Alignment styles will be added here */
}

.inner-div {
  width: 150px;
  height: 150px;
  background-color: blue;
  /* More alignment styles here */
}

h1, p {
  font-family: sans-serif;
}</code>

2. elemen berpusat

mari kita memusatkan unsur -unsur kita. Menambah display: flex; dan justify-content: center; ke .outer-div hasil:

<code class="language-css">.outer-div {
  display: flex;
  justify-content: center;
}</code>

Memohon sama dengan

pada mulanya menghasilkan hasil yang tidak dijangka. Mengeluarkan sifat .inner-div dan width dari height meningkatkan hasilnya, tetapi ia tidak sesuai. .inner-div

mari kita laraskan HTML sedikit. HTML dan CSS yang dikemas kini berikut memberikan ilustrasi yang lebih baik:

<code class="language-html"><div class="outer-div">
  <div class="inner-div">Centered Content</div>
</div></code>

Menukar

ke

dalam justify-content: center; menunjukkan satu lagi teknik penjajaran berguna. justify-content: space-between; .outer-div

Ini meliputi asas -asas. Tinggal untuk Bahagian 2! Kongsi petua dan cara penjajaran CSS anda di bawah!

Atas ialah kandungan terperinci Menyelaraskan elemen dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!