2011-12-05 8 views
67

私はいくつかのHTMLいる:本部は私の文書に間隔をHTMLスパンアラインメントセンターが機能していませんか?

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

を変更しているので、私は代わりに、このためにスパンを使用したいです。私はこの問題を解決するにはどうすればよい

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

しかし、スパンは、内容を集中されていませんか?

EDIT:

私の完全なコード:

<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要素があります"間隔を変更する"?これはどういう意味ですか?また、spanはデフォルトでは_inline_要素ですが、divは_block_レベルの要素なので、スパンはありません。 – Bojangles

+0

こんにちはJamWaffles、「間隔」とは、divがコンテンツの上下にスペースを追加することを意味します。スパンはこれをしません。 – David19801

+0

FirebugまたはChromeのインスペクタを使用して、要素に適用されるCSSルールを確認し、パディングまたは余白を追加するルールを探します。また、周囲の要素がパディング/マージンを持つことも可能です。 – Bojangles

答えて

126

divはブロック要素で、幅が設定されていない限りコンテナの幅に広がります。スパンはインライン要素で、内部にテキストの幅を持ちます。現在、CSSプロパティとしてalignを設定しようとしています。整列は属性です。

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

ただし、align属性は推奨されていません。コンテナにはCSS text-alignプロパティを使用する必要があります。

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

'align =" center "'は推奨されていないので使用しないでください。 – Biotox

+42

@Biotoxあなたは完全な答えを読んだことがありますか? – Will

+3

はい、私はオプションとしてそれを入れていません... – Biotox

19

align属性は廃止されました。代わりにCSS text-alignを使用してください。また、display:blockまたはdisplay:inline-blockを使用して幅の値を設定しない限り、div(ブロック要素)と同じように動作しない限り、スパンはテキストの中央になりません。

レイアウトの例を投稿できますか?

+0

これは正解でなければなりません –

+0

素晴らしいこと!ありがとう。 – dallinchase

+0

2つのインライン要素をインライン要素のままで別々に揃えることはできませんか? –

35

次のスタイルを使用してください。 margin:auto通常はコンテンツの中央揃えに使用されます。 display:tablespan要素

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

スパンはインラインブロックであり、ブロックのほとんどの努力はインラインコンテキストのアウトスタイルをという粘り強さで、テキストサイズのインライン化を調整するために必要とされています。レイアウトスタイル(限界の競合)を単純化するには、改行を含む 'p'タグにdivを追加します。

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

ちょうどword-wrap:break-word;をCSSで使用してください。できます。

6
span.login-text { 
font-size: 22px; 
display:table; 
margin-left: auto; 
margin-right: auto; 

}

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

は、私にとっては非常によく働きました。他のすべての説明の上にも

0

これをしようと、私はあなたが同じ"="記号を使用していると信じて、代わりにコロン":"の:

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

それは次のようになります。

<span style="border:1px solid red;text-align:center"> 
関連する問題