0

あなたは私の前のメッセージで私を誤解したので、例を挙げて新しく投稿します. 次の例では、左に画像を、右に div をフロートさせて、使用しているブラウザや日付 + 時刻などを含むとします。

ここで、同じ行のこれら 2 つのフロートの中央に会社の名前も表示する必要があります。ブラウザの幅を小さくしても、中間の会社のテキストは常に中央に配置する必要があります。

この例では、テキストを 2 つのフロートの中央に配置することはできません。テキストをインライン要素に入れるかブロック要素に入れるかは問題ではありません。私は両方を試しました。この例では、ap タグがあります。

フローティング要素がある場合、 text-align:centered を使用しても機能しません。

<!DOCTYPE html>
<html>
    <head>
       <meta charset = "utf-8">
       <title></title>
       <style type = "text/css">
           #imageone 
           {
              float:left;
           }
           p#right
           {
              float:right;
           }
           div p
           {
              text-align  : center;
           }
       </style>
    </head>
    <body>
       <div style="background:red">
          <p>My company</p>
          <p id="right">2013-06-12 10:00:12</p>
          <img id="imageone" src="img/die1.png" alt="photo" />
       </div>
    </body>
</html>
4

3 に答える 3

3

要素のいずれか 2 つが固定幅である場合、これは比較的簡単に実行できます。position: relative包含要素とposition: absolute子 (左、右、および中央に配置されるブロック) でを使用して実装できます。

例については、この jsFiddleを参照してください。

于 2013-09-12T20:49:52.813 に答える
1

html の float 要素の後に会社名を入れることができます。

<body>
   <div style="background:red">

      <p id="right">2013-06-12 10:00:12</p>
      <img id="imageone" src="img/die1.png" alt="photo" />
        <p id="name">My company</p>
   </div>
</body>

margin 0 を p#right に追加すると、他の要素と垂直方向に中央揃えで表示されるようになります。

#imageone 
       {
          float:left;
       }
       p#right
       {
          float:right;
            margin: 0;
       }
       div #name
       {
          text-align  : center;

       }

}

ここでフィドルを参照してください: http://jsfiddle.net/WDrVK/1/

于 2013-09-12T20:52:42.563 に答える
0

中央の要素を としてスタイルできますmargin: 0 auto;か?

この例のように: http://bluerobot.com/web/css/center1.html

于 2013-09-12T20:54:46.097 に答える