1

私は何かを作成しようとしています

このような

<div class="model-info">
<div class="mainholder">
  <div class="divImage centeredImageContainer" align="center"> 
  <a href="talent_view.aspx?uid=e7385d69-8659-4ab4-a55d-d693ca9ba816">
        <img  class='centeredImage' style='width:80px;' src="http://t0.gstatic.com/images?    q=tbn:ANd9GcRX9N8qSDD4OhL9XH0N8RTbf3bObBR5TrqKeyUFxi-ZpAKQxyVsrw" alt="Anne" title="Anne">
   </a>
 </div>

CSSは次のとおりです。

.centeredImageContainer
{
  position:relative;
 }
 .centeredImage
{position: absolute;
top: 0;
bottom: 0;
margin: auto;
left: 0;
right: 0;}

しかし、絶対位置で画像を垂直方向に中央揃えしようとすると、すべてのデザインが乱れます。

このような

画像は動的で、固定サイズはありません。

また、 .divimage の高さを px に変更すると受け入れられますが、 % の場合は高さが 0px になります。

この画像を垂直方向に中央揃えにするにはどうすればよいですか。それとも私は何かを逃していますか？

ありがとうございました

4

2 に答える 2

3

画像のサイズが固定されていない場合は困難です。abbood の別の解決策は、画像を div の背景画像として設定し、背景位置をcenter center次のように設定することです。

<div style="height: 600px">         
    <a href="#">
            <div style="text-align:center; height:100%; border-style:solid;  background: url(http://t0.gstatic.com/images?q=tbn:ANd9GcRX9N8qSDD4OhL9XH0N8RTbf3bObBR5TrqKeyUFxi-ZpAKQxyVsrw) no-repeat center center;">
            </div>
    </a>
</div>

欠点は、CSS3 プロパティを使用しない限り、画像サイズを変更できないことですbackground-size。

于 2013-02-16T11:40:45.797 に答える
1

私のjsfiddleを見てください

基本的に私はこのトリックを使用しました：

 <div class="outer"> 
  <div class="middle">
    <div class="inner">
      <!-- content to be vertically centered-->
    </div>
  </div>
 </div>

そしてCSS：

.outer {
    display: table;
    position: static;
    height: 9.22em; /* the height you want to center according to */

}
.middle {
    display: table-cell;
    vertical-align: middle;
    position: static;
}
.inner {
    margin-left: auto;
    margin-right: auto;
}

ノート：

  • 絶対配置の使用は避ける必要があります..b / cドキュメントフローから要素を取り出します..これは、あなたの場合のように予期しない結果を引き起こします
  • 私の解決策では、中央に配置する高さを知っている必要があります..私の場合..右のテーブルの高さは約9.22emであると考えたので、それを入れました.
于 2013-02-16T11:21:35.363 に答える