Laksanakan penjajaran mendatar elemen HTML dalam div

Question

Saya mempunyai tiga objek HTML dan mahu meletakkan butang Sebelumnya di sebelah kiri, butang Seterusnya di sebelah kanan dan rentang di tengah dalam div bekas.

<SEBELUMNYA> <NEXT>

<code>
    {
        float:left;
    }
    #spanStage
    {
        font-weight:bold;
        vertical-align:middle;
    }
    #btnSeterusnya
    {
        float:right;
    }</code>

        
        Tahap 5
        
    

Answer 1

Gaya “display:flex” ialah cara yang bagus untuk mengekalkan elemen ini pada baris yang sama. Tidak kira apa jenis elemen dalam div. Terutama jika kelas input adalah kawalan bentuk, penyelesaian lain seperti bootstrap, inline-block tidak akan berfungsi dengan baik.

Contoh:

<div style="display:flex; flex-direction: row; justify-content: center; align-items: center">
     <input type="button" value="Previous" id="btnPrevious"/>
     <span id="spanStage">Stage 5</span>
     <input type="button" value="Next" id="btnNext"/>
</div>

Maklumat lanjut tentang flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

arah lentur: baris, lajur

justify-kandungan: hujung lentur, tengah, ruang-antara, ruang-keliling

selaraskan-item: regangan, mula lentur, hujung lentur, tengah

Answer 2

Hanya tambahkan text-align: center pada pembalut anda untuk menetapkan penjajaran mendatar semua elemen kanak-kanak yang tidak terapung/tidak berkedudukan:

div{
    text-align:center;
}

Tiada unsur kanak-kanak lain di luar

<span>默认为内联元素。因此，您可以在它们上使用display:block并适当地对其进行样式设置，或者稍微调整父元素的样式。由于除了<span>和<button>, jadi lebih baik gunakan penyelesaian mudah ini.

Sila ambil perhatian, text-align:<value>会从父元素继承，因此如果您想在包装器中包含其他内容，应该检查text-align:center是否适合您。否则，在特定元素中使用text-align:<value>，其中value可以是left、right、center或justify.

JSFiddle Demo