1

html コード:

<div class="container">
  <a class="ank">
    <img src="http://www.w3schools.com/images/w3schoolslogoNEW310113.gif" />
  </a>
</div>

CSS コード:

.ank
{
  display: block;
  width: 500px;
  height: 500px;
  line-height: 100%;
 }

 img
 {
  vertical-align: middle;
 }

 .container
 {
  display:block;
  width: 500px;
  height: 500px;
  border: 1px solid black;
  font-size: 500px;
 }

jsfiddle: http://jsfiddle.net/mfBZZ/5/

Anksのline-heightが500pxになるようにjsfiddleを変更し、コンテナからfont-sizeを削除すると、機能します。

しかし、フォントサイズを500pxのコンテナに追加してから、ankで行の高さをそのフォントサイズの100％にすると、機能しません。画像が本来あるべき場所よりも少し低くなります。

jsfiddle の作業: http://jsfiddle.net/eujFY/1/

アップデート：

このソリューションは私にとってはうまくいきます： http://jsfiddle.net/eujFY/2/ <----更新。

4

1 に答える 1

0

解決策を見つけたのを見てきましたが、両方の要素で高さを手動で設定する必要があり、不要なタグを使用する必要があります。したがって、「display:table」(コンテナ) および「display:table-cell」(内部要素) のルールを確認することをお勧めします: http://jsfiddle.net/RxGS5/

HTML

<div class="container">
    <a class="ank">
        <img src="http://www.w3schools.com/images/w3schoolslogoNEW310113.gif" />
    </a>
</div>

CSS

.container
{
    display:table;
    width: 500px;
    height: 500px;
    border: 1px solid black;
}

.ank
{
    display: table-cell;
    vertical-align: middle;
}
于 2013-04-17T11:57:21.700 に答える