2

画像 (青) を配置して、サイズが何であれ、背後の div のベースラインに対して常に中央に配置されるようにしたいと考えています (赤、含まれる div ではありません)。背後の div は常に同じサイズ/位置になります。

ここに画像の説明を入力

私は drupal を使用しており、tpl ファイル以外の編集についてはよく知らないので、css のみを使用することをお勧めします。

ありがとう！

編集：これがレイアウトですhttp://pastebin.com/SisQHM4y

4

2 に答える 2

1

こんにちはあなたはこのようにこの純粋なCSSを行うことができます

css

.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 500px;
    height: 400px;
    background:green;
}

HTML

<div class="wraptocenter"><img src="//?" alt="images" /></div>

ライブデモhttp://jsfiddle.net/rohitazad/tvrMp/

このhttp://www.brunildo.org/test/img_center.htmlに関する詳細情報 </p>

于 2012-04-05T06:44:39.713 に答える
0

おそらく次のようなものです：

<style>
 #blue { margin-left:auto;margin-right:auto; }
</style>

<div id="red">
 <div id="blue">
  <img src="?" id="myImg" />
 </div>
</div>

編集

なるほど、x 軸を垂直方向ではなく水平方向に中央揃えにしたいのですね。そして、そのリンクは少し面倒です。おそらくあなたはしようとすることができます

<style>
 .user-picture { margin-top: auto; margin-bottom: auto; }
</style>


<div class="content">
<div class="profile" typeof="sioc:UserAccount" about="/users/diver1">
    <div class="user-picture">
        <a href="/users/diver1" title="View user profile." class="active">
        <img typeof="foaf:Image" src="http://waterworksworldwide.com/sites/default/files/pictures/picture-126-1333572014.gif" alt="Diver1&#039;s picture" title="Diver1&#039;s picture" />
    </a>  
</div>
</div>

質問の赤と青で示されているように、領域間の重なりがどこにあるかを確認するのにまだ少し苦労しています。私の提案と重複しない場合は、お知らせください。おそらく、いくつかのバリエーションを使用してみてくださいposition: absolute;

于 2012-04-04T21:39:10.303 に答える