2

レイアウトの問題で CSS 関連の問題が発生しています。最初にこのスクリーンショットを参照してください:http://i.stack.imgur.com/nmw69.png ここでは、次のように css を使用しています:

.image{float:right; padding-top:10px; padding-left:10px; padding-bottom:10px;}
.description{font-size:15px; font-style:italic; padding:10px; color:#5C5C5C; text-shadow:0px 0px 1px #A1A1A1;}
.image, .description{display:block;}
.main-article{clear:both;}

しかし、私がやりたいのは、説明を真ん中に表示することです。このように: 2 番目の画像のように説明クラスを中央http://i.stack.imgur.com/aX2B1.png に配置する CSS を教えてください。divありがとう

4

5 に答える 5

2

基本的には次のようになります。 

.description, .image {
    display:inline-block;
    vertical-align:middle;
}
于 2013-06-20T18:47:22.473 に答える
0

2 つのアイテムの周囲にコンテナの高さを設定し、説明を次のように設定できます。

top: 50%

ここにそれのフィドルがあります

http://jsfiddle.net/andrewliu/mS4pB/1/

アップデート：

少し変更しました。必要な場所で何らかのハックを行うことができます。コンテナを使用してmargin-top: 50%;から、別のコンテナを使用します。margin-top: -25%;

http://jsfiddle.net/mS4pB/9/

于 2013-06-20T19:05:31.583 に答える
0

GCyrillus が言ったように:

display: inline-block;
vertical-align: middle;

動作します。ただし、幅を定義していません。だからあなたがすることは次のとおりです：

.image{ width: 300px; padding-top:10px; padding-left:10px; padding-bottom:10px; }
.description{ width: 600px; font-size: 15px; font-style: italic; padding: 10px; color: #5C5C5C; text-shadow: 0px 0px 1px #A1A1A1; }
.image, .description{ display: inline-block; vertical-align: middle; }

これらの幅を必要に応じて変更すると、問題なく機能します。適切な対策として、インラインブロックの空白のバグの犠牲にならないようにして、次のいずれかを適用してください。

.image { margin-left: -4px; } //It works sometimes for me but I think it isn't cross-browser very well.

または、次のように HTML の要素間に空白を許可しないでください。

<div class="description">
    Lorem Ipsum
</div><div class="image">
    <img />
</div>

また、IE7 をサポートする場合:

.image, .description { display: inline-block; vertical-align: middle; *display: inline; zoom: 1; }  //Some people don't like the hacks and some people don't like supporting old IE ;-)
于 2013-06-21T16:44:41.327 に答える