masyarakat

Belajar

Perpustakaan Alatan

Alat AI

Masa lapang

Melayu

Rumah > hujung hadapan web > tutorial css > Jajarkan item Flex ke tengah bekas dalam CSS

Jajarkan item Flex ke tengah bekas dalam CSS

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Lepaskan： 2023-09-17 10:57:10

ke hadapan

1453 orang telah melayarinya

在 CSS 中将 Flex 项目对齐在容器的中间

Gunakan atribut align-item dengan nilai center untuk menjajarkan item flex ke tengah.

Contoh

Anda boleh cuba jalankan kod berikut untuk mencapai nilai pusat

Demonstrasi masa nyata

<!DOCTYPE html>
<html>
   <head>
      <style>
         .mycontainer {
            display: flex;
            background-color: orange;
            align-items: center;
            height: 150px;
            width: 600px;
         }
         .mycontainer > div {
            background-color: white;
            text-align: center;
            line-height: 40px;
            font-size: 25px;
            width: 100px;
            margin: 5px;
         }
      </style>
   </head>
   <body>
      <h1>Quiz</h1>
      <div class = "mycontainer">
         <div>Q1</div>
         <div>Q2</div>
         <div>Q3</div>
         <div>Q4</div>
      </div>
   </body>
</html>

Salin selepas log masuk

Atas ialah kandungan terperinci Jajarkan item Flex ke tengah bekas dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Artikel sebelumnya："Bagaimanakah CSS berfungsi di belakang tabir?" Artikel seterusnya：CSS menyesuaikan kandungan

Kenyataan Laman Web ini

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

Artikel terbaru oleh pengarang