質問

これは、HTMLとCSSで定期的に働いている人にとっては基本的な質問だと確信しています。

私は2つのテキストを持っています。どちらも同じ行に表示する必要があります - 1つは整列したままにする必要があり、もう1つは左側のブロック内のテキストの量に関係なく中央に配置する必要があります(明らかに、左アライメントテキストは、中間マークに及ぶものではありません)。

これを理解し、テストしやすくするために、サンプルを含めました。私のサンプルには、必要なものがありますが、同じ線の代わりに2行で。

解決策が見つかった場合は、作業サンプルを再投稿してください。

ありがとう。

<html>
<head>
    <title>Alignment Test</title>
    <style>
        body {background-color: #E6E6E6;}
        #reference {width: 100%;
                    border: solid 1px navy;}
        #half1 {width: 50%;
                text-align: right;
                border-right: dotted 1px navy}
        #container {width: 100%;
                    text-align: center;
                    border: solid 1px navy;}
        #floatLeft {float:left;
                    border: dotted 1px green;
                    background-color: #D0F5A9;}
        #centered {width: 100%;
                      border: dotted 1px red;
                      background-color: #F5F6CE;}
    </style>
</head>
<body>
    <div id="reference">
        <div id="half1">Middle of container -->&nbsp;</div>
        <div id="half2"></div>
    </div>
    <div id="container">
        <div id="centered">This text should be centered
            <div id="floatLeft">This text should be left aligned</div>
        </div>
    </div>
</body>

役に立ちましたか?

解決

<div style="text-align:center;position:relative">
    Centered
    <div style="position:absolute;left:0;top:0">Left</div>
</div>

他のヒント

Y.ショハムのソリューションは機能します。ラッピングコンテンツをより優雅に処理する別のものがあります(中央と左のセクションの間のオーバーラップを許可しません)が、マークアップのアイテムの順序を変更する必要があります。

<div style="text-align: center; overflow: auto;">
  <div style="float: left; text-align: left;">left</div>
  centered
</div>

text-align: left たとえば、幅が指定されておらず、内部には画像のような固有の幅がない場合。)

ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top