Bagaimana cara menyelaraskan seluruh tubuh html ke tengah?

Question 1

Bagaimana cara menyelaraskan seluruh isi html ke tengah?

Question 2

Saya baru saja tersandung pada posting lama ini, dan sementara saya yakin user01 telah lama menemukan jawabannya, saya menemukan jawaban saat ini tidak cukup berfungsi. Setelah bermain-main sebentar menggunakan info yang diberikan oleh yang lain, saya menemukan solusi yang berfungsi di IE, Firefox, dan Chrome. Di CSS:

html, body {
    height: 100%;
}

html {
    display: table;
    margin: auto;
}

body {
    display: table-cell;
    vertical-align: middle;
}

Ini hampir identik dengan jawaban abernier, tetapi saya menemukan bahwa menyertakan lebar akan merusak pemusatan, seperti menghilangkan margin otomatis. Saya harap siapa pun yang tersandung di utas ini akan menemukan jawaban saya bermanfaat.

Catatan: Abaikan html, body { height: 100%; }untuk hanya menengahkan secara horizontal.

Question 3

Anda dapat mencoba:

body{ margin:0 auto; }

Question 4

EDIT

Mulai hari ini dengan flexbox, Anda bisa

body {
  display:flex; flex-direction:column; justify-content:center;
  min-height:100vh;
}

JAWABAN SEBELUMNYA

html, body {height:100%;}
html {display:table; width:100%;}
body {display:table-cell; text-align:center; vertical-align:middle;}

Question 5

Jika saya memiliki satu hal yang ingin saya bagikan berkenaan dengan CSS, itu adalah CARA MEMUSATKAN HAL-HAL FAVORIT SAYA DI SELURUH Sumbu !!!

Keuntungan dari metode ini :

Kompatibilitas penuh dengan browser yang benar-benar digunakan orang
Tidak ada tabel yang dibutuhkan
Sangat dapat digunakan kembali untuk memusatkan elemen lain di dalam induknya
Menampung orang tua dan anak dengan dimensi dinamis (berubah)!

Saya selalu melakukan ini dengan menggunakan 2 kelas: Satu untuk menentukan elemen induk, yang isinya akan menjadi centered ( .centered-wrapper), dan yang kedua untuk menentukan anak mana dari induk yang berpusat ( .centered-content). Kelas ke-2 ini berguna dalam kasus di mana orang tua memiliki banyak anak, tetapi hanya 1 yang perlu dipusatkan). Dalam hal ini, bodyakan menjadi .centered-wrapper, dan divakan menjadi batin .centered-content.

<html>
    <head>...</head>
    <body class="centered-wrapper">
        <div class="centered-content">...</div>
    </body>
</html>

Ide untuk centering sekarang akan membuat .centered-contentsebuah inline-block. Ini akan dengan mudah memfasilitasi pemusatan horizontal, melalui text-align: center;, dan juga memungkinkan pemusatan vertikal seperti yang akan Anda lihat.

.centered-wrapper {
    position: relative;
    text-align: center;
}
.centered-wrapper:before {
    content: "";
    position: relative;
    display: inline-block;
    width: 0; height: 100%;
    vertical-align: middle;
}
.centered-content {
    display: inline-block;
    vertical-align: middle;
}

Ini memberi Anda 2 kelas yang benar-benar dapat digunakan kembali untuk memusatkan anak mana pun di dalam orang tua mana pun! Cukup tambahkan kelas .centered-wrapperdan .centered-content.

Jadi, ada apa dengan :beforeelemen itu? Ini memfasilitasi vertical-align: middle;dan diperlukan karena perataan vertikal tidak relatif terhadap tinggi induk - perataan vertikal relatif terhadap ketinggian saudara tertinggi !!! . Oleh karena itu, dengan memastikan bahwa ada saudara kandung yang tingginya sama dengan tinggi induk (100% tinggi, 0 lebar agar tidak terlihat), kita tahu bahwa perataan vertikal akan berkaitan dengan tinggi induk.

Satu hal terakhir: Anda perlu memastikan bahwa tag htmldan bodyberukuran seukuran jendela sehingga memusatkannya sama dengan memusatkan ke browser!

html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

Biola: https://jsfiddle.net/gershy/g121g72a/

Question 6

http://bluerobot.com/web/css/center1.html

body {
    margin:50px 0; 
    padding:0;
    text-align:center;
}

#Content {
    width:500px;
    margin:0 auto;
    text-align:left;
    padding:15px;
    border:1px dashed #333;
    background-color:#eee;
}

Question 7

Saya menggunakan flexbox html. Untuk efek yang bagus, Anda dapat mencocokkan chrome browser untuk membingkai konten Anda pada ukuran layar yang lebih besar dari maksimum halaman Anda. Saya menemukan #eeeeeekecocokan yang cukup baik. Anda bisa menambahkan bayangan kotak untuk efek float yang bagus.

    html{
        display: flex;
        flex-flow: row nowrap;  
        justify-content: center;
        align-content: center;
        align-items: center;
        height:100%;
        margin: 0;
        padding: 0;
        background:#eeeeee;
    }
    body {
        margin: 0;
        flex: 0 1 auto;
        align-self: auto;
        /*recommend 1920 / 1080 max based on usage stats, use 100% to that point*/
        width: 100%
        max-width: 900px;
        height: 100%;
        max-height: 600px;
        background:#fafafa;
        -webkit-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.75);
        box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.75);
    }

gambar / data milik StatCounter

Question 8

<style>
        body{
            max-width: 1180px;
            width: 98%;
            margin: 0px auto;
            text-align: left;
        }
</style>

Cukup terapkan gaya ini sebelum menerapkan CSS apa pun. Anda dapat mengubah lebar sesuai kebutuhan Anda.

Question 9

Tulis saja

<body>
   <center>
            *Your Code Here*
   </center></body>

Question 10

Coba ini

body {
max-width: max-content;
margin: auto;
}

Answer 1

93

Bagaimana cara menyelaraskan seluruh isi html ke tengah?

html css Rajat Gupta
sumber

4

Horisontal, vertikal atau keduanya?

Ciro Santilli 郝海东冠状病六四事件法轮功

Answer 2

4

Horisontal, vertikal atau keduanya?

Ciro Santilli 郝海东冠状病六四事件法轮功

Answer 3

Saya baru saja tersandung pada posting lama ini, dan sementara saya yakin user01 telah lama menemukan jawabannya, saya menemukan jawaban saat ini tidak cukup berfungsi. Setelah bermain-main sebentar menggunakan info yang diberikan oleh yang lain, saya menemukan solusi yang berfungsi di IE, Firefox, dan Chrome. Di CSS:

html, body {
    height: 100%;
}

html {
    display: table;
    margin: auto;
}

body {
    display: table-cell;
    vertical-align: middle;
}

Ini hampir identik dengan jawaban abernier, tetapi saya menemukan bahwa menyertakan lebar akan merusak pemusatan, seperti menghilangkan margin otomatis. Saya harap siapa pun yang tersandung di utas ini akan menemukan jawaban saya bermanfaat.

Catatan: Abaikan html, body { height: 100%; }untuk hanya menengahkan secara horizontal.

Answer 4

Jawaban yang bagus. Hanya bertanya-tanya (karena saya tidak memiliki banyak pengalaman dengan HTML), apakah menyetel tinggi ke 100% perlu?

matahari terbenam.

Answer 5

7

@JackHumphries Ketinggian hanya diperlukan jika Anda ingin meratakan tengah halaman pada sumbu vertikal dan horizontal. Jika Anda hanya menginginkan horizontal, Anda dapat menghilangkan tingginya.

MildWolfie

Answer 6

37

Anda dapat mencoba:

body{ margin:0 auto; }

arniotaki
sumber

1

Ini adalah jawaban yang sangat sederhana namun merupakan cara yang paling bersih dan efisien untuk memusatkan tag badan di tengah halaman.

justinhartman

1

Sementara itu singkatnya juga tidak berfungsi di IE, Edge Legacy, Edge, Chrome, maupun Firefox. Masalahnya adalah bahwa margin otomatis hanya berfungsi ketika lebar elemen kurang dari induknya. Karena 'body' defaultnya 100%, tidak ada ruang di bagian tepi untuk margin yang disisipkan secara otomatis. Anda dapat menggunakan body { margin:0 auto; max-width: 700px; }dan kemudian tubuh Anda akan menjadi 700px dan memungkinkan pembungkus pada perangkat yang lebih kecil.

pengguna3347790

Answer 7

1

Ini adalah jawaban yang sangat sederhana namun merupakan cara yang paling bersih dan efisien untuk memusatkan tag badan di tengah halaman.

justinhartman

Answer 8

1

Sementara itu singkatnya juga tidak berfungsi di IE, Edge Legacy, Edge, Chrome, maupun Firefox. Masalahnya adalah bahwa margin otomatis hanya berfungsi ketika lebar elemen kurang dari induknya. Karena 'body' defaultnya 100%, tidak ada ruang di bagian tepi untuk margin yang disisipkan secara otomatis. Anda dapat menggunakan body { margin:0 auto; max-width: 700px; }dan kemudian tubuh Anda akan menjadi 700px dan memungkinkan pembungkus pada perangkat yang lebih kecil.

pengguna3347790

Answer 9

17

EDIT

Mulai hari ini dengan flexbox, Anda bisa

body {
  display:flex; flex-direction:column; justify-content:center;
  min-height:100vh;
}

JAWABAN SEBELUMNYA

html, body {height:100%;}
html {display:table; width:100%;}
body {display:table-cell; text-align:center; vertical-align:middle;}

abernier
sumber

1

DOCTYPE mana yang mengizinkan styleatribut htmlentitas?

menyerahkan

1

@ceving: tidak yakin untuk mengerti ... berarti itu bukan CSS yang valid?

abernier

Answer 10

1

DOCTYPE mana yang mengizinkan styleatribut htmlentitas?

menyerahkan

Answer 11

1

@ceving: tidak yakin untuk mengerti ... berarti itu bukan CSS yang valid?

abernier

Answer 12

Jika saya memiliki satu hal yang ingin saya bagikan berkenaan dengan CSS, itu adalah CARA MEMUSATKAN HAL-HAL FAVORIT SAYA DI SELURUH Sumbu !!!

Keuntungan dari metode ini :

Kompatibilitas penuh dengan browser yang benar-benar digunakan orang
Tidak ada tabel yang dibutuhkan
Sangat dapat digunakan kembali untuk memusatkan elemen lain di dalam induknya
Menampung orang tua dan anak dengan dimensi dinamis (berubah)!

Saya selalu melakukan ini dengan menggunakan 2 kelas: Satu untuk menentukan elemen induk, yang isinya akan menjadi centered ( .centered-wrapper), dan yang kedua untuk menentukan anak mana dari induk yang berpusat ( .centered-content). Kelas ke-2 ini berguna dalam kasus di mana orang tua memiliki banyak anak, tetapi hanya 1 yang perlu dipusatkan). Dalam hal ini, bodyakan menjadi .centered-wrapper, dan divakan menjadi batin .centered-content.

<html>
    <head>...</head>
    <body class="centered-wrapper">
        <div class="centered-content">...</div>
    </body>
</html>

Ide untuk centering sekarang akan membuat .centered-contentsebuah inline-block. Ini akan dengan mudah memfasilitasi pemusatan horizontal, melalui text-align: center;, dan juga memungkinkan pemusatan vertikal seperti yang akan Anda lihat.

.centered-wrapper {
    position: relative;
    text-align: center;
}
.centered-wrapper:before {
    content: "";
    position: relative;
    display: inline-block;
    width: 0; height: 100%;
    vertical-align: middle;
}
.centered-content {
    display: inline-block;
    vertical-align: middle;
}

Ini memberi Anda 2 kelas yang benar-benar dapat digunakan kembali untuk memusatkan anak mana pun di dalam orang tua mana pun! Cukup tambahkan kelas .centered-wrapperdan .centered-content.

Jadi, ada apa dengan :beforeelemen itu? Ini memfasilitasi vertical-align: middle;dan diperlukan karena perataan vertikal tidak relatif terhadap tinggi induk - perataan vertikal relatif terhadap ketinggian saudara tertinggi !!! . Oleh karena itu, dengan memastikan bahwa ada saudara kandung yang tingginya sama dengan tinggi induk (100% tinggi, 0 lebar agar tidak terlihat), kita tahu bahwa perataan vertikal akan berkaitan dengan tinggi induk.

Satu hal terakhir: Anda perlu memastikan bahwa tag htmldan bodyberukuran seukuran jendela sehingga memusatkannya sama dengan memusatkan ke browser!

html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

Biola: https://jsfiddle.net/gershy/g121g72a/

Answer 13

8

http://bluerobot.com/web/css/center1.html

body {
    margin:50px 0; 
    padding:0;
    text-align:center;
}

#Content {
    width:500px;
    margin:0 auto;
    text-align:left;
    padding:15px;
    border:1px dashed #333;
    background-color:#eee;
}

jantimon
sumber

apa tujuan 0pxakhirnya, daripada auto?

Don Cheadle

Answer 14

apa tujuan 0pxakhirnya, daripada auto?

Don Cheadle

Answer 15

Saya menggunakan flexbox html. Untuk efek yang bagus, Anda dapat mencocokkan chrome browser untuk membingkai konten Anda pada ukuran layar yang lebih besar dari maksimum halaman Anda. Saya menemukan #eeeeeekecocokan yang cukup baik. Anda bisa menambahkan bayangan kotak untuk efek float yang bagus.

    html{
        display: flex;
        flex-flow: row nowrap;  
        justify-content: center;
        align-content: center;
        align-items: center;
        height:100%;
        margin: 0;
        padding: 0;
        background:#eeeeee;
    }
    body {
        margin: 0;
        flex: 0 1 auto;
        align-self: auto;
        /*recommend 1920 / 1080 max based on usage stats, use 100% to that point*/
        width: 100%
        max-width: 900px;
        height: 100%;
        max-height: 600px;
        background:#fafafa;
        -webkit-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.75);
        box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.75);
    }

gambar / data milik StatCounter

Answer 16

4

Jawaban yang bagus dan modern. Hanya sedikit komentar. (a) Awalan vendor untuk box-shadowmungkin berlebihan karena browser yang mendukung flexjuga mendukung box-shadow. (b) Ada banyak CSS yang menghiasi jawaban Anda, tetapi membuat bagian yang penting sulit dibedakan. Terima kasih

Manngo

Answer 17

Sangat banyak (b), dalam komentar @ Manngo di atas.

cjauvin

Answer 18

Jawaban yang bagus. Modern. Tapi itu bisa saja lebih sederhana dengan konten yang sama.

carloswm85

Answer 19

<style>
        body{
            max-width: 1180px;
            width: 98%;
            margin: 0px auto;
            text-align: left;
        }
</style>

Cukup terapkan gaya ini sebelum menerapkan CSS apa pun. Anda dapat mengubah lebar sesuai kebutuhan Anda.

Answer 20

4

Tulis saja

<body>
   <center>
            *Your Code Here*
   </center></body>

icyNerd
sumber

2

Cara paling mudah dan sederhana untuk melakukannya.

shaeed

2

Tag tengah tidak berlaku lagi: stackoverflow.com/questions/1798817/…

kyczawon

Answer 21

2