Sejajarkan konten di dalam div

152

Saya menggunakan pelurusan teks gaya css untuk menyelaraskan isi di dalam sebuah wadah dalam HTML. Ini berfungsi dengan baik saat kontennya berupa teks atau browser adalah IE. Tetapi sebaliknya itu tidak bekerja.

Juga seperti namanya itu digunakan pada dasarnya untuk menyelaraskan teks. Properti align sudah lama tidak digunakan lagi.

Apakah ada cara lain untuk menyelaraskan konten dalam html?

html css text-align

— Hemanshu Bhojak
sumber

Tolong beri kami info lebih lanjut? melewati kode yang tidak berfungsi di browser lain.

— Shoban

Anda harus memberikan contoh markup Anda sehingga orang tahu apa yang Anda coba lakukan. Kalau tidak, pertanyaan Anda tidak jelas.

— levik

216

text-align menyelaraskan teks dan konten inline lainnya. Itu tidak menyelaraskan elemen blok anak-anak.

Untuk melakukan itu, Anda ingin memberikan elemen yang Anda inginkan selaras lebar, dengan margin kiri dan kanan 'otomatis'. Ini adalah cara yang sesuai standar yang bekerja di mana saja kecuali IE5.x.

<div style="width: 50%; margin: 0 auto;">Hello</div>

Agar ini berfungsi di IE6, Anda perlu memastikan Mode Standar aktif dengan menggunakan DOCTYPE yang sesuai.

Jika Anda benar-benar perlu mendukung Mode IE5 / Quirks, yang saat ini tidak seharusnya Anda lakukan, Anda dapat menggabungkan dua pendekatan berbeda untuk memusatkan:

<div style="text-align: center">
    <div style="width: 50%; margin: 0 auto; text-align: left">Hello</div>
</div>

(Jelas, style paling baik diletakkan di dalam stylesheet, tetapi versi inline adalah ilustrasi.)

— bobince
sumber

2

Jika Anda tidak tahu lebar div, yang sering terjadi, solusi ini bekerja dengan sempurna di semua browser: matthewjamestaylor.com/blog/...

— Artem Russakovskii

Saya menggunakan <div style = "width: 100%; margin: 0 auto;"> Hello </div>

— Aamol

9

Anda dapat melakukannya seperti ini juga:

HTML

<body>
    <div id="wrapper_1">
        <div id="container_1"></div>
    </div>
</body>

CSS

body { width: 100%; margin: 0; padding: 0; overflow: hidden; }

#wrapper_1 { clear: left; float: left; position: relative; left: 50%; }

#container_1 { display: block; float: left; position: relative; right: 50%; }

Seperti Artem Russakovskii sebutkan juga, baca artikel asli oleh Mattew James Taylor untuk deskripsi lengkap.

— Mahdi
sumber

9

<div class="content">Hello</div>

.content {
    margin-top:auto;
    margin-bottom:auto;
    text-align:center;
}

— krithi k
sumber

1

Sementara potongan kode ini dapat menyelesaikan pertanyaan, termasuk penjelasan sangat membantu untuk meningkatkan kualitas posting Anda. Ingatlah bahwa Anda menjawab pertanyaan untuk pembaca di masa depan, dan orang-orang itu mungkin tidak tahu alasan untuk saran kode Anda.

— andreas

Maaf, kode di atas akan menyelaraskan div pusat dengan konten induk

— krithi k

6

Jujur, saya benci semua solusi yang saya lihat sejauh ini, dan saya akan memberi tahu Anda alasannya: Mereka sepertinya tidak pernah menyelaraskannya dengan benar ... jadi inilah yang biasanya saya lakukan:

Saya tahu nilai pixel yang dimiliki oleh masing-masing div dan marginnya masing-masing ... jadi saya melakukan hal berikut.

Saya akan membuat pembungkus div yang memiliki posisi absolut dan nilai kiri 50% ... jadi div ini sekarang dimulai di tengah layar, dan kemudian saya kurangi setengah dari semua konten lebar div ... dan saya mendapatkan konten penskalaan INDAH ... dan saya pikir ini bekerja di semua browser juga. Cobalah sendiri (contoh ini mengasumsikan semua konten di situs Anda dibungkus dengan tag div yang menggunakan kelas wrapper ini dan semua konten di dalamnya memiliki lebar 200px):

.wrapper {
    position: absolute;
    left: 50%;
    margin-left: -100px;
}

Sunting: Saya lupa menambahkan ... Anda mungkin juga ingin mengatur lebar: 0px; pada pembungkus ini div untuk beberapa browser untuk tidak menampilkan scrollbar, dan kemudian Anda dapat menggunakan posisi absolut untuk semua div dalam.

Ini juga berfungsi MENAKJUBKAN untuk menyelaraskan konten Anda secara vertikal juga menggunakan top: 50% dan margin-top. Bersulang!

— Alexandru
sumber

2

Berikut adalah teknik yang saya gunakan yang telah bekerja dengan baik:

<div>
    <div style="display: table-cell; width: 100%">&nbsp;</div>
    <div style="display: table-cell; white-space: nowrap;">Something Here</div>
</div>

Luaskan cuplikan

— Anjing polisi
sumber

2

Di bawah ini adalah metode yang selalu berhasil untuk saya

Dengan menggunakan model tata letak fleksibel :

Atur tampilan div induk ke display: flex;dan Anda dapat menyelaraskan elemen turunan di dalam div menggunakan justify-content: center;(untuk menyelaraskan item pada sumbu utama) danalign-items: center; (untuk menyelaraskan item pada sumbu silang).

Jika Anda memiliki lebih dari satu elemen anak dan ingin mengontrol cara mereka disusun (kolom / baris), maka Anda juga dapat menambahkan flex-direction properti.

Contoh kerja:

.parent {
  align-items: center;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  height: 250px;
  width: 250px;
}

.child {
  border: 1px solid black;
  height: 50px;
  width: 50px;
}

<div class="parent">
  <div class="child"></div>
</div>

Luaskan cuplikan

2. (metode yang lebih lama) Menggunakan posisi, properti margin dan ukuran tetap

Contoh kerja:

.parent {
  border: 1px solid black;
  height: 250px;
  position: relative;
  width: 250px;
}

.child {
  border: 1px solid black;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  position: absolute;
  width: 50px;
}

<div class="parent">
  <div class="child"></div>
</div>

Luaskan cuplikan

— nmak18
sumber

1

Semua jawaban berbicara tentang perataan horizontal.

Untuk meluruskan beberapa elemen konten secara vertikal, lihat pendekatan ini:

<div style="display: flex; align-items: center; width: 200px; height: 140px; padding: 10px 40px; border: solid 1px black;">
    <div>
        <p>Paragraph #1</p>
        <p>Paragraph #2</p>
    </div>
</div>

Luaskan cuplikan

— Nicolas
sumber

-2

Contoh lainnya menggunakan HTML dan CSS:

<div style="width: Auto; margin: 0 auto;">Hello</div>

— Diogo
sumber

27

Tak satu pun dari apa yang Anda tulis khusus untuk ASP.NET. Ini hanya HTML dan CSS sebaris. Apakah Anda bermaksud menulis kontrol server dengan properti?

— webworm

1

Tetap. Jawabannya sekarang menyebutkan teknologi yang benar.

— jony