HTMLスパン揃えセンターが機能していませんか？

107

私はいくつかのHTMLを持っています：

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

Divによってドキュメントの間隔が変更されるため、代わりにこれにスパンを使用します。

しかし、スパンはコンテンツを一元化していません：

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

どうすれば修正できますか？

編集：

私の完全なコード：

<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

— デビッド19801
ソース

1

あなたのdivは「間隔を変える」ですか？これはどういう意味ですか？また、スパンはデフォルトではインライン要素であるため、divはブロックレベルの要素であるため、そうなりません。

— Bojangles 2011

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

— David19801

FirebugまたはChromeインスペクターを使用して、要素に適用されているCSSルールを確認し、パディングまたはマージンを追加するルールを探します。周囲の要素にパディング/マージンがある可能性もあります。

— Bojangles 2011

5

text-align=centerあるべきtext-align:center

— n611x007

197

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

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

ただし、align属性は非推奨です。text-alignコンテナのCSS プロパティを使用する必要があります。

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

— 意志
ソース

46

以下のスタイルをご利用ください。margin:auto通常、コンテンツを中央揃えにするために使用されます。要素にdisplay:table必要ですspan

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

— クリス・J
ソース

37

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

レイアウトの例を投稿できますか？www.jsfiddle.netを使用

— ルシファーサム
ソース

よくできました！ありがとう。

— dallinchase 2014年

インライン要素を維持したまま、2つのインライン要素の配置を変えることはできませんか？

— Daniel Springer

10

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

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

私にとってはとてもうまくいきました。これも試して

— AIMABLE
ソース

2

他のすべての説明に加えて、"="コロンの代わりに等号を使用していると思います":"：

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

そのはず：

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

— ナハゼ
ソース

1

スパンはインラインブロックであり、インラインテキストのサイズに合わせて調整されます。粘り強さは、インラインコンテキストからスタイルを外そうとするほとんどの努力をブロックします。レイアウトスタイルを簡略化する（競合を制限する）には、改行を使用してdivを 'p'タグに追加します。

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

— マーク・スチュワート
ソース

-7

word-wrap:break-word;CSSで使用するだけです。できます。

— 月
ソース