Rumah  >  Artikel  >  hujung hadapan web  >  Apakah atribut yang boleh digunakan dalam css untuk memusatkan imej secara mendatar?

Apakah atribut yang boleh digunakan dalam css untuk memusatkan imej secara mendatar?

下次还敢
下次还敢asal
2024-04-25 12:21:121108semak imbas

Pemusatan mendatar imej boleh dicapai melalui jidar CSS atau sifat penjajaran teks. 1. Gunakan margin: 0 auto; untuk menetapkan margin kiri dan kanan untuk dikira secara automatik untuk mencapai pemusatan. 2. Tetapkan penjajaran teks bekas: tengah; dan paparan elemen imej: blok sebaris untuk memusatkannya sebagai elemen blok sebaris.

Apakah atribut yang boleh digunakan dalam css untuk memusatkan imej secara mendatar?

Atribut CSS untuk mencapai pemusatan mendatar imej

Dalam CSS, anda boleh mencapai pemusatan mendatar imej dengan menetapkan margin atau text-align sifat-sifat. margintext-align属性来实现图片水平居中。

1. 使用margin属性

<code class="css">img {
  margin: 0 auto;
}</code>

margin属性设置图片元素的上下左右外边距。通过设置margin: 0 auto;,将左右外边距设置为auto,这意味着浏览器会自动根据容器的宽度计算左右外边距,从而实现图片水平居中。

2. 使用text-align属性

<code class="css">.container {
  text-align: center;
}
img {
  display: inline-block;
}</code>

text-align属性设置容器内元素的文本对齐方式。通过设置.container { text-align: center; },将容器的文本对齐方式设置为居中。再将图片元素设置为display: inline-block;

🎜1. Gunakan atribut margin🎜🎜rrreee🎜 atribut margin untuk menetapkan jidar atas, bawah, kiri dan kanan elemen imej. Dengan menetapkan margin: 0 auto;, margin kiri dan kanan ditetapkan kepada auto, yang bermaksud bahawa penyemak imbas secara automatik akan mengira margin kiri dan kanan berdasarkan lebar bekas untuk mencapai imej mendatar. 🎜🎜🎜2 Gunakan atribut text-align🎜🎜rrreee🎜text-align untuk menetapkan penjajaran teks elemen dalam bekas. Tetapkan penjajaran teks bekas ke tengah dengan menetapkan .container { text-align: center }; Kemudian tetapkan elemen gambar kepada display: inline-block; untuk menjadikannya elemen blok inline, dengan itu memusatkan gambar secara mendatar. 🎜

Atas ialah kandungan terperinci Apakah atribut yang boleh digunakan dalam css untuk memusatkan imej secara mendatar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn