0

以下のコードを参照してください。画像とテキストの両方がdivにあります。純粋なcssを使用して、画像（div_a）とテキスト（div_txt）の両方を中央に垂直に配置し<a>、divをクリック可能に保つ方法（ブラウザー間の互換性を備えた推奨ソリューション）：

<style type="text/css">
  a.div_a {
      display:block;
      width:320px;
      height:160px;
      background-color:#CCC;}
</style>

<a href="www.mydoamin.com" class="div_a">
  <img src="http://jsfiddle.net/img/logo.png" style="float:left; margin-right:10px; background-color:#666;" />
  <span class="div_txt">Content</span>
</a>

私は次のことを試しましたが、それは役に立ちませんでした：

.div_txt {vertical-align:middle;}

私は画像/テキストについて上記で別々の解決策を見つけましたが、両方を一緒にすることはできませんでした。

4

2 に答える 2

1

垂直方向の画像から取得し、 <a>（jsFiddleデモ）を考慮してわずかに変更しました。

リンクの追加のマークアップ

a.absoluteCenterWrapper {
 display:block;
}

CSS

.absoluteCenterWrapper {
 position:relative; /* Contains the image in the div */
}

/* Positioning */
.absoluteCenter {
 margin:auto; /* Required */
 position:absolute; /* Required */
 top:0;bottom:0; /* Aligns Vertically */
}

/* Sizing - resizes down to avoid cutting off */
.absoluteCenter { /* Fallback Sizing */
 max-height:100%;
 max-width:100%;
}

HTML

<a href="http://www.example.com/" class="absoluteCenterWrapper">
 <img src="PATHTOIMAGE" class="absoluteCenter">
 <p>Paragraph goes here.</p>
</a>
于 2013-02-18T20:57:04.883 に答える
1

アンカー要素に与えdisplay: tableてから、各画像とスパンを.wrapper次のプロパティを持つスパンにラップします。

.wrapper {
  display: table-cell;
  vertical-align: middle;
}

HTML：

<a href="www.mydoamin.com" class="div_a">
  <span class="wrapper">
    <img src="http://jsfiddle.net/img/logo.png" style="background-color:#666;" />
  </span>

  <span class="wrapper">
    <span class="div_txt">Content</span>
  </span>
</a>

DEMOを参照してください。

このアプローチはIE7では機能しないため、IE7のサポートが必要な場合は、より複雑な方法を使用する必要があることに注意してください。

于 2013-02-18T21:00:40.973 に答える