0

私は CSS、HTML、およびその他の UI 関連技術に非常に慣れていないため、この質問が適切でない場合は、申し訳ありません。

背景画像のある複数のボックスをクリック可能にし、中央 (水平および垂直) にテキストを配置したい。

私は以下のようなHtmlコードを持っています:

<a href="www.mydoamin.com" class="div_a">
    <span class="wrapper">
      <span class="div_txt">Contentdas asd ad adasd asd asdad </span>
    </span>
</a>
<a href="www.mydoamin.com" class="div_a">
    <span class="wrapper">
      <span class="div_txt">Content</span>
    </span>
</a>

次の CSS コードを使用します。

a.div_a {
      display:inline-table;
      width:200px;
      height:100px;
      background-color:#CCC;
      background-image:url( http://jsfiddle.net/img/logo.png);
    text-align:center;
    top:0;
    }

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

}

ここでわかるように、最初のボックスのテキストが 1 行を超えると、2 番目のボックスが正しく配置されないことを除いて、すべて問題なく聞こえます!!

ここで何かを見逃しましたか？

よろしくお願いします。

4

1 に答える 1

1

に設定されている要素inline-tableは、vertical-align をデフォルトの 以外に設定するだけで済みますbaseline。

vertical-align: middle;

http://jsfiddle.net/WcCnW/4/

于 2013-03-16T12:39:39.523 に答える