HTML span hizalama merkezi çalışmıyor mu?


107

Biraz HTML’im var:

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

Div, belgemdeki aralığı değiştiriyor, bu nedenle bunun yerine bir aralık kullanmak istiyorum.

Ancak span, içeriği merkezileştirmiyor:

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

Bunu nasıl düzeltirim?

DÜZENLE:

Tam kodum:

<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>

1
Div'iniz "aralığı değiştiriyor" mu? Bununla ne demek istiyorsun? Ve sizin yayılımınız olmaz çünkü varsayılan olarak bir satır içi öğe, oysa bir div blok düzeyinde bir öğedir.
Bojangles

Merhaba JamWaffles, "Boşluk" derken div'in içeriğin üstüne ve altına boşluk eklediğini kastediyorum. Aralık bunu yapmaz.
David19801

Öğenize hangi CSS kurallarının uygulandığını görmek için Firebug veya Chrome denetçisini kullanın ve dolgu veya kenar boşluğu ekleyeni arayın. Ayrıca, çevreleyen öğelerin dolgu / kenar boşluğuna sahip olması da mümkündür.
Bojangles

5
text-align=centerolmalıdırtext-align:center
n611x007

Yanıtlar:


197

Div bir blok öğesidir ve genişlik ayarlanmadıkça kabın genişliğine yayılır. Aralık, satır içi bir öğedir ve içindeki metnin genişliğine sahip olacaktır. Şu anda hizalamayı bir CSS özelliği olarak ayarlamaya çalışıyorsunuz. Hizalama bir niteliktir.

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

Ancak, align özelliği kullanımdan kaldırılmıştır. text-alignKonteynerdeki CSS özelliğini kullanmalısınız .

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

47

Lütfen aşağıdaki stili kullanın. margin:autonormalde içeriği ortalamak için kullanılır. eleman display:tableiçin gereklispan

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

37

alignNitelik kaldırılmıştır. text-alignBunun yerine CSS kullanın. Ayrıca, yayılma alanı, kullanmadığınız display:blockveya display:inline-blockgenişlik için bir değer ayarlamadığınız sürece metni ortalamayacaktır , ancak daha sonra bir div (blok öğesi) ile aynı şekilde davranacaktır.

Düzeninizin bir örneğini gönderebilir misiniz? Www.jsfiddle.net'i kullanın


Harika çalıştı! Teşekkürler.
dallinchase

Satır içi öğeleri tutarken iki satır içi öğeyi farklı şekilde hizalayamaz mıyım?
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>

Benim için çok iyi çalıştı. bunu da dene


2

Diğer tüm açıklamaların yanı sıra, "="kolon yerine eşittir işareti kullandığınıza inanıyorum ":":

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

Olmalı:

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

1

Span, satır içi bloktur ve satır içi bağlamın dışında stil oluşturma çabalarının çoğunu engelleyen bir kararlılıkla satır içi metin boyutuna ayarlanır. Düzen stilini basitleştirmek için (çakışmaları sınırlandırmak), div 'p' etiketine satır sonu ile ekleyin.

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

-7

Sadece word-wrap:break-word;css'de kullanın . İşe yarıyor.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.