12

div の中央に配置したい可変サイズのテキスト ブロックがあります。div の幅はその親要素の % であり、高さはパディングによって定義されますが、中央のテキストの高さは異なります。これは、次の方法で簡単に実現できます。

<div style="width: 50%; padding: 15px; text-align: center;">
    Lorem ipsum...
</div>

それはうまくいきます。

しかし、右側の部分を追加しようとすると:

<div style="width: 50%; padding: 15px; text-align: center;">
    Lorem ipsum...
    <div style="float: right;">ASDF!</div>
</div>

次に、右側のテキストの幅をテキストの合計幅としてカウントし、「ASDF!」を配置します。右側にありますが、「Lorem ipsum...」を本来あるべきよりも左側に配置します (あたかも lorem の全長に asdf が含まれているかのように!)。

これが私が達成しようとしているもののモックアップです：

私が達成しようとしていることのモックアップ。

これは flexbox を使えばかなり簡単だと思いますが、古いブラウザーをサポートする必要があるため、最近のものを使用することは避けたいと思います。

この質問は関連しているようですが、（間違っている場合は修正してください）既知の幅が必要なようです。

これを行うにはどうすればよいですか？

4

9 に答える 9

15

これを試して：

<div class='content' style="width: 50%; padding: 15px; text-align: center; position: relative">
    <div class="noDown" style="position: absolute; right: 0;">ASDF!</div>
    Lorem ipsum...
</div>​

JsFiddle テスト: http://jsfiddle.net/3Y7ty/2/

于 2012-12-21T21:57:31.693 に答える
4

IE8+ で十分？

fiddleに基づいて構築すると、IE8+ で必要なものを取得できます。ラッパーを含めるには、プロパティを設定する#b必要があることに注意してください。次に、フローティング要素に、これを追加するだけです:box-sizingwidth: 50% padding

margin: 0 -15px 0 -100%;

-15px右マージンは、アイテムを完全に右に引っ張るための15px右パディングを考慮し、次に-100%左マージンは前のテキストを完全に中央に配置します。

それとも IE7 のサポートが必要ですか?

「古いブラウザ」をサポートする必要性について言及していますが、どのように保持するかについての情報は提供していません（IE8は現在「古い」ですが、おそらくさらに古いことを指しています）。IE7 (またはそれ以下?) のサポートが必要な場合は、条件付きで IE7 をターゲットにして、代わりにこれを使用する必要があります。

margin: -1.2em -15px 0 0;

float: rightIE7 は、後のブラウザーと同じものを認識せず、前のテキストの「下」に配置し、-100%左マージンはフロート要素をクリアに左に引き戻します。それがなくなり、前のテキストに沿ってテキストを引き上げるために、line-height使用されているフォントの に等しく設定する必要がある負の上部マージンを与えます (通常は1.2またはになり1.1ます。#bコンテナーに明示的に設定します)。これが IE6 で動作するかどうかはテストしていません。

于 2012-12-21T14:31:21.497 に答える
2

このフィドルを追加しました。http://jsfiddle.net/nQvEW/68/ .これをチェックしてください。

メイン要素を絶対として配置し、子要素の 1 つを親に対して相対的に配置し、もう 1 つを絶対的に配置しました。上と左の属性は、必要に応じて調整できます。しかし、メインの div 要素に対して次のコードをハードコーディングしました。これをCSSとして追加できます。

position:absolute;
width:500px;
height:40px;
background-color:#F00;
于 2012-12-24T15:47:35.430 に答える
2

これでよろしいでしょうか？http://jsfiddle.net/3Y7ty/

.container {
    width:100%;
    overflow:hidden;
    position:relative;
}
.center {
    width:50%;
    padding:15px;
    margin:0 auto;
    background:#ccc;
}

.right {
    display:inline-block;
    padding:15px;
    background:#999;
    position:absolute;
    right:0;
    top:0;
}


<div class="container">

 <div class="center">
     Lorem ipsum...
 </div>

 <div class="right">
     ASDF!
 </div>

</div>
于 2012-12-21T14:41:24.273 に答える
1

あなたが試すことができます：

    <div style="width:50%; padding: 15px; text-align: center; ">
Lorem ipsum...<div style=" display:inline; float:right;">ASDF!</div>
</div>

先ほど行った簡単なモックアップで機能しました。

于 2012-11-25T04:57:22.730 に答える
1

これは実際には見かけほど複雑ではありません。通常のフローから右揃えの div を削除し、テキスト コンテナーの右側に配置 (配置) するだけです。(デモ内の CSS のコメント行はすべて必要です。残りはデモ用です。)

このソリューションの利点は、コンテナーとテキスト要素が正常に流れ、例と同じ HTML 構造を使用することです。

デモ：

デモを見る >> http://pasteboard.s3.amazonaws.com/images/1U5yFIwE.png

基本コード:

#text {
  margin: auto; /* aligns #text to the center of #container */
  text-align: center; /* self-explanatory; aligns text to the center */
  position: relative; /* needed so that the position of #right is relative to #text, not the body */
}

#right {
  display: inline-block; /* allows #right to display on the same line as the text in #text while still acting like a block element (block: p, div, etc.) */
  position: absolute; /* removes #right from the normal flow, and positions it in the top-left of #row */
  right: 0; /* aligns #right 0px away from the right side of #text */
}

画像： デモ画像

于 2012-12-27T22:46:40.633 に答える
0

他の人が言っているように、2番目のdivをフローから解放してから、再配置する必要があります。絶対上部をパディングと同じに設定して、正しい垂直位置に戻します。これを試してください（カラカスと同じではありません）。2番目のビューを参照して、センタリングが正しいことを示してください。

<div style="border:1px solid red;width: 50%; padding: 15px; text-align: center;position: relative;">
    Lorem ipsum...
    <div style="position: absolute;right: 0;top: 15px;">ASDF!</div>
</div>
<div style="border:1px solid red;width: 50%; padding: 15px; text-align: center;">
    Lorem ipsum...
</div>

http://jsfiddle.net/huuanito/8N9BT/

于 2012-12-28T08:02:14.440 に答える
0

私はちょっとしたCSSの仕事をしました。

HTML のコード サンプル:

<div class="MainContainer"><p>Lorem ipsum...</p><div style="float: right;">ASDF!</div></div>

CSS のコード サンプル :

.MainContainer{
    width : 50%;
    padding : 15px !important;   
    text-align : center !important;
    border : 15px solid #000;
    position : absolute;   
}

.MainContainer div { margin-top : -7%; text-align:center !important;}

実際に見るには：

http://jsfiddle.net/john_rock/tZzwA/

これはあなたの問題を解決するのに役立つかもしれないと思います.

于 2012-12-27T12:31:26.353 に答える
0

そのままのコードは、いくつかの小さな変更でほとんど機能します。

  1. 2 つ目divは独立している必要があり、最初のものにネストされていません。
  2. 最初の「div」は左に、2 番目は右にフロートする必要があります。

それはほとんどそれです。

    <div style="width:50%; padding:15px; text-align:center; float:left;">
     Lorem ipsum...
 </div>

 <div style="float:right;">
     ASDF!
 </div>

それを試してみてください！

于 2012-12-28T08:38:56.030 に答える