1

私は次のことをしようとしています。<div>親divの幅全体にまたがる要素があります。この中に、A。テキストとB.画像を配置したいと思います。

A.左側にあるテキスト（ルーズテキストまたは、、、、、、または要素で<p>囲まれたテキスト）。<h2><span><div>

B.<img>高さと幅の両方がわかっている要素を介して定義された画像。

その他の要件：

  1. <img>テキストと要素の間に12pxのスペースが必要です。

  2. 重要：A。のテキストとB.の画像の両方をグループとして中央に配置する必要があります。

  3. A.からのテキストは、その囲みスペースの垂直方向の中央に配置する必要があります。

どうすればこの効果を達成できますか？さまざまなことを試しましたが、画像をテキストの右側に配置できず、テキストAを垂直方向の中央に配置できません。

この単純な問題を解決する方法を知っている人はいますか？

答えてくれてありがとう、とにかく、CSSは単純なことをとても難しくしているようです：

  div#content_whatsnew, div#content_bestsellers { clear: both; height: 108px; font-size: xx-large; text-transform: uppercase; margin-left: 380px; }
  div#content_whatsnew p, div#content_bestsellers p { float: left; height: 108px; line-height: 108px; padding: 8px 12px 0px 0px; color: black; }
  div#content_whatsnew img, div#content_bestsellers img { float: left; height: 108px; }
4

5 に答える 5

2

これはあなたが達成しようとしていることですか？http://dabblet.com/gist/3130292

于 2012-07-17T15:21:51.810 に答える
1

これは機能するはずです：

<div class="my-outer-container">
 <div class="my-inner-container">
  <div class="my-text">Here is my text, it is lovely text.</div>
  <img src="my-image.jpg" alt="" class="my-image" />
 </div>
</div>

.my-outer-container {
 width:auto;
 text-align:center;
}

.my-inner-container {
 width:XXXpx; /* enter whatever the width you want here is */
 margin:0 auto;
 overflow:auto;
}

.my-text {
 width:XXXpx; /* enter whatever the width you want here is */
 float:left;
 margin-right:12px;
}

.my-image {
 width:XXXpx; /* enter whatever the width you want here is */
 height:XXXpx; /* enter whatever the height you want here is */
 float:left;
}

次に、@biziclopが提供する上記のリンクの垂直方向のセンタリングチップを使用します。

于 2012-07-17T15:21:13.743 に答える
1

これは正しいですか？

http://jsfiddle.net/89twb/2/

テキストの配置については、こちらをご覧ください。

そして、要素を隣り合わせに配置するために、これ。

于 2012-07-17T15:21:38.067 に答える
1

divを中央に配置するには、幅が固定されている必要があります。親divの幅にまたがる場合は、その内側にのみ中央揃えを設定できます。したがって、最善の解決策は、テキストを固定幅の左フローティングdivに配置し、画像に対して同じことを行ってから、両方を固定幅ホルダーdivに配置することです。マージン：自動;

次に例を示します：http：//dabblet.com/gist/3130148

編集-テキストをテーブルに配置して、テキストを垂直方向の中央に配置しました。テーブルは、クロスブラウザを垂直方向に中央揃えにする唯一の確実な方法です。

于 2012-07-17T15:27:55.210 に答える
1

最も直感的な方法は、「vertical-align：middle;」を使用することです。しかし、それはあなたが望むように機能しない傾向があります。

私はいくつかの調査を行い、ここからこのコードを見つけました。http://phrogz.net/css/vertical-align/index.html

お役に立てれば！

<style type="text/css">
    #myoutercontainer { position:relative }
    #myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }
</style>

<div id="myoutercontainer">
    <div id="myinnercontainer">
        <p>Hey look! I'm vertically centered!</p>
        <p>How sweet is this?!</p>
    </div>
</div>
于 2012-07-17T15:29:26.367 に答える