1

これが私がこれまでに持っているものです。

http://jsfiddle.net/Jazzepi/6Tgqs/

<a class ="banner" href="#">
    <img src="http://www.hettahuskies.com/images/headers/HHwebsite03.jpg">
</a>

.banner {
    display: block;
    margin: 0 auto;
}
img {
    display: block;
    margin: 0 auto;
}

レイアウトは正しいように見えますが、どちらかの側にマージンを追加することで、イメージタグがアンカー div の内側に中央揃えされています。これにより、アンカー タグの横方向のサイズとクリック可能な領域がページ全体の幅に拡張されます。

display:table-cell; を使用する別のアプローチを見ました。含まれている div (この場合はアンカー) で、しかしその後、margin: 0 auto; を使用できません。含まれているdivを中央に配置するトリック。

http://jsfiddle.net/Jazzepi/6Tgqs/1/

<a class ="banner" href="#">
    <img src="http://www.hettahuskies.com/images/headers/HHwebsite03.jpg">
</a>

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

私の目標は、アンカー div をページの中央に配置し、クリック可能な領域を画像のサイズに設定することです。私の主な問題は、アンカー内にネストされた img がアンカー タグに幅を与えないことだと思います。私がこれを行う場合。

http://jsfiddle.net/Jazzepi/6Tgqs/3/

<a class ="banner" href="#">
    <img src="http://www.hettahuskies.com/images/headers/HHwebsite03.jpg">
</a>

.banner {
    display: block;
    margin: 0 auto;
    width: 1000px;
}
img {
}

できます！しかし、アンカータグ内の画像の幅を指定する必要はありません。ページには既にこの情報があります。

編集-この最後のリンクは「機能します」が、幅：1000pxは必要ありません。アンカー div で。後で画像を変更すると、幅が異なる可能性があるため、アンカー タグの幅を変更する必要があります。人間の介入なしに、アンカータグで img を取り囲みたいと思います。

編集 - 水平方向のセンタリングについて話しています。垂直ではありません。

4

2 に答える 2

2

現在のマークアップに追加のラッパーを使用すると、次のことができます。

フィドル

<div class="container">
<a class ="banner" href="#">
    <img src="http://www.hettahuskies.com/images/headers/HHwebsite03.jpg">
    </a>
</div>

CSS

.container
{
    text-align:center;
    width: 100%;
}
.banner {
    display:inline-block;

}
img {
    display: table-cell;
    vertical-align: middle;
}
于 2013-07-28T12:01:28.707 に答える
0

display table-cell で作成したい場合は、ここにデモがあります

アンカーを div でラップし、定義して高さ 100% を適用するだけですdisplay: table;

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

div{
    width: 100%; 
    height: 100%; 
    display: table;
}
html,body{
    height: 100%;
}
于 2013-07-28T12:06:47.537 に答える