Pusat perataan rentang HTML tidak berfungsi?

107

Saya memiliki beberapa HTML:

<div align="center" style="border:1px solid red">
This is some text in a div element!
</div>

Div mengubah spasi pada dokumen saya, jadi saya ingin menggunakan span untuk ini.

Tetapi span tidak memusatkan konten:

<span style="border:1px solid red;align=center">
This is some text in a div element!
</span>

Bagaimana cara mengatasinya?

EDIT:

Kode lengkap saya:

<html>
<body>

<p>This is a paragraph. This text has no alignment specified.</p>

<span style="border:1px solid red;text-align=center">
  This is some text in a div element!
</span>

</body>
</html>
html css David 19801
sumber
1
Div Anda "mengubah spasi"? Apa yang Anda maksud dengan ini? Dan span Anda tidak akan karena secara default ini adalah elemen inline , sedangkan div adalah elemen level blok .
Bojangles
Halo JamWaffles, Yang saya maksud dengan "spasi" adalah div menambahkan spasi di atas dan di bawah konten. Rentang tidak melakukan ini.
David19801
Gunakan Firebug atau inspektur Chrome untuk melihat aturan CSS apa yang diterapkan ke elemen Anda, dan cari aturan yang menambahkan padding atau margin. Mungkin juga elemen sekitarnya memiliki padding / margin.
Bojangles
5
text-align=centerharustext-align:center
n611x007

Jawaban:

197

Div adalah elemen blok, dan akan menjangkau lebar penampung kecuali jika lebarnya disetel. Span adalah elemen sebaris, dan akan memiliki lebar teks di dalamnya. Saat ini, Anda mencoba menyetel align sebagai properti CSS. Sejajarkan adalah atribut.

<span align="center" style="border:1px solid red;">
    This is some text in a div element!
</span>

Namun, atribut align sudah tidak digunakan lagi. Anda harus menggunakan text-alignproperti CSS di penampung.

<div style="text-align: center;">
    <span style="border:1px solid red;">
        This is some text in a div element!
    </span>
</div>
Akan
sumber
47

Silakan gunakan gaya berikut. margin:autobiasanya digunakan untuk mensejajarkan konten. display:tabledibutuhkan untuk spanelemen

<span style="margin:auto; display:table; border:1px solid red;">
    This is some text in a div element!
</span>
Chris J.
sumber
37

The alignatribut usang. Gunakan CSS text-alignsebagai gantinya. Selain itu, span tidak akan memusatkan teks kecuali Anda menggunakan display:blockatau display:inline-blockdan menetapkan nilai untuk lebarnya, tetapi akan berperilaku sama seperti div (elemen blok).

Bisakah Anda memposting contoh tata letak Anda? Gunakan www.jsfiddle.net

Lucifer Sam
sumber
Bekerja dengan baik! Terima kasih.
dallinchase
Tidak dapatkah saya meratakan dua elemen sebaris secara berbeda sambil tetap menjaganya agar tetap sebaris?
Daniel Springer
11 
span.login-text {
    font-size: 22px;
    display:table;
    margin-left: auto;
    margin-right: auto;
}

<span class="login-text">Welcome To .....CMP</span>

Bagi saya ini bekerja dengan sangat baik. coba ini juga

AIMABLE
sumber
2

Di atas semua penjelasan lainnya, saya yakin Anda menggunakan "="tanda sama dengan , bukan titik dua ":":

<span style="border:1px solid red;text-align=center">

Harus:

<span style="border:1px solid red;text-align:center">
nhazean
sumber
1

Span adalah blok sebaris dan menyesuaikan dengan ukuran teks sebaris, dengan keuletan yang memblokir sebagian besar upaya untuk menata keluar dari konteks sebaris. Untuk menyederhanakan gaya tata letak (konflik batas), tambahkan div ke tag 'p' dengan jeda baris.

<p> some default stuff
<br>
<div style="text-align: center;"> your entered stuff </div>
tandai stewart
sumber
-7

Cukup gunakan word-wrap:break-word;di css. Berhasil.

mon
sumber