段落内の "text-align" の重複

質問

CSSについての質問です。
<p>タグの段落内で "text-align" を使用して、
文字を寄せる記述をしているのですが、
「中央揃え」と「右寄せ」が重なってしまい、うまく表示されません。

分かりにくい説明だと思いますので、ソース例を書きます。

---------------------------------------------------------

<p style="text-align: center;">文字を中央に <span style="text-align: right;">こちらは右寄せ</span></p>

---------------------------------------------------------

上記のように記述しています。
つまり、段落内は基本的に中央揃えなのだが、
一部は右寄せにする…のようなことが、
CSSで実現できるのでしょうか。

どなたかご回答をよろしくお願いします。

回答No.2

UKY · ベストアンサー

p { text-align: center; }
span { position: static; float: right; }
でできるはず。

ブラウザによっては右寄せした文字が一行分ずれますが、これはブラウザが CSS の規格に完全には準拠していないためです。

お礼

{ position: static; float: right; } ですか…。なるほど…。
参考になりました。回答有難うございました。

回答No.3

cyokokichi

1行だけなら。
<p style="text-align: center;"><span style="float: right;">こちらは右寄せ</span>文字を中央に </p>

複数行なら。

<div style="float: right;width:**px;">こちらは右寄せ</div>
<div style="text-align: center;margin:right:**px">文字を中央に </div>
**はお好みに合わせてください。

お礼

"float: right;" で出来るのですね。
詳細な回答有難うございます。

回答No.1

BLUEPIXY

<span>でなく<p>にするか<div>にすればいいのでは

お礼

<div> にするという方法もあるのですね。
回答有難うございました。