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>

html css

— David 19801
kaynak

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

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>

— Niyet
kaynak

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>

— Chris J
kaynak

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

— Lucifer Sam
kaynak

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

— AMAÇLANABİLİR
kaynak

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

— nhazean
kaynak

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>

— Mark stewart
kaynak

-7

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

— pazartesi
kaynak