1

以下は私のHTMLです：

<div class=container">
   <div class="row">
    <h2 class="text-center">Enter your name below</h2>
    <div class="col-md-6 center">
        <img class="profile-picture" ng-src="../Content/images/default-avatar.png" src="../Content/images/default-avatar.png">
    </div>
    <div class="col-md-6 center">
        <h3>Profile name: N/A</h3>
        <h3>Status: Waiting for user input</h3>
    </div>
   </div>
</div>

私のcssは次のとおりです（ブートストラップとともに）：

.profile-picture
{
    max-width: 200px;
    max-height: 200px;
}

.center
{
    margin: 0 auto;
    float: none;
}

これにより、次の出力が生成されます。 ここに画像の説明を入力

表示したい方法は次のとおりです。 ここに画像の説明を入力

どうすればこれを達成できますか？それらは同じ行の一部であるため、同じ行に表示されるべきではありませんか? それぞれの長さは 6 であるのに、なぜ水平方向に整列しないのでしょうか?

4

3 に答える 3

3

問題は、列に必要なフロートを削除していることです(.center に設定float:noneすることにより)。そのクラスを完全に削除し.centerます。必要ありません。行のdivもありません...

タグのrow周りにも を追加したことに注意してください。h2使いやすさと適切な書式設定のために、そのタグもラップする必要があります。フォーマットをチェックするのに役立ちます。;)

また、このように 2 つの<h3>タグを続けて使用しないでください。<p>2 番目の h3 の代わりに使用します。または、1 つの<h3>タグを使用<br />して、1 つの h3 を 2 行に分割するのに使用します (以下を参照)。

<div class=container">
    <div class="row">
        <h2 class="text-center">Enter your name below</h2>
    </div>
    <div class="row">
        <div class="col-md-6">
            <img class="profile-picture" ng-src="../Content/images/default-avatar.png" src="../Content/images/default-avatar.png">
        </div>
        <div class="col-md-6">
            <h3>Profile name: N/A <br />
                Status: Waiting for user input</h3>
        </div>
    </div>
</div>
于 2013-11-11T23:23:47.467 に答える
1

何をしているのかよくわからない場合は、グリッド クラスを持つ要素にスタイルやクラスを適用しないでください。何かを変更する必要がある場合は、代わりにネストされた div を使用してください。

<div class=container">

  <h2 class="text-center">Enter your name below</h2>

  <div class ="row">

    <div class="col-md-6">
      <div class ="center">
         <img class="profile-picture" ng-src="../Content/images/default-avatar.png" src="../Content/images/default-avatar.png">
       </div>
    </div>

    <div class="col-md-6">
      <div class ="center">
        <h3>Profile name: N/A</h3>
        <h3>Status: Waiting for user input</h3>
      </div>
    </div>

  </div>
</div>
于 2013-11-11T23:24:02.793 に答える