2

皆様、早速のご意見ありがとうございます、大変参考になりました。1 つの問題が残っています:表のセルに適用された場合、画像の中央の 1 行にきちんと収まるテキストと、画像の中央の 1 行にきちんと収まるテキストの両方をline-height、 も もpadding中央に配置できないようです。

奇妙なことに、SwDevMan81 によって以下に提供されるパディング ソリューションは、div に適用すると問題なく動作しますが、テーブル セルには適用されません...

私の素朴さを前もってお詫び申し上げます。これは HTML と CSS への私の最初の進出です。

テーブルのコードは次のとおりです。

<table border="1">
    <tr>
        <td class="imgcontainer">
            <a href="#">
                <img src="http://www.bigjimsburgers.com/burger.jpg" alt="" />
                <span class="desc">
                    Very long text that wraps around and is centered properly
                </span>
            </a>
        </td>
        <td class ="imgcontainer">
            <a href="#">
                <img src="http://www.bigjimsburgers.com/burger.jpg" alt="" />
                <span class="desc">
                    misaligned text
                </span>
            </a>
        </td>
    </tr>
    <tr>
        <td class="imgcontainer">
            <a href="#">
                <img src="http://www.bigjimsburgers.com/burger.jpg" alt="" />
                <span class="desc">
                    misaligned text
                </span>
            </a>
        </td>
        <td class ="imgcontainer">
            <a href="#">
                <img src="http://www.bigjimsburgers.com/burger.jpg" alt="" />
                <span class="desc">
                    Very long text that wraps around and is centered properly
                </span>
            </a>
        </td>
    </tr>
</table>

<style type="text/css">
    .imgcontainer {
        overflow: hidden;
        text-align: center;
    }

    .imgcontainer img {
        float: left;
        background: #fff;
        width: 200px;
        height: 200px;
    }

    .imgcontainer a .desc {
        display: none;
        font-size: 1.0em;
    }

    .imgcontainer a:hover {
        cursor: pointer;
        text-decoration: none;
    }

    .imgcontainer a:hover .desc {
        display: -webkit-box;
        display: -moz-box;
        display: box;
        -webkit-box-align: center;
        -moz-box-align: center;
        box-align: center;
        background: #DDD;
        filter: alpha(opacity=75);
        opacity: .75;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
        position: absolute;
        width: 200px;
        height: 200px;
    }
</style>
4

5 に答える 5

3

ナイーブであることを謝る必要はありません。垂直方向のセンタリングは、CSS で最も誤解されている部分の 1 つです。残念ながら、簡単な解決策がtable display propertiesあります。

彼らにはなんらかの形のハックが必要ですが、サポート要件は何ですか?

私が持っている最適な IE ソリューションには、HTML と CSS の両方へのハックが含まれます (追加の HTML 要素が役立ちます)。

IE6/7 のサポートなしで動作するはずのコードは次のとおりです。

HTMLは上記のとおりです

CSS:

table {
  table-layout: fixed;
  width: 403px;
  border-collapse: collapse;
  border-spacing: 0;
}

.imgcontainer {
  text-align: center;
  padding: 0;
  vertical-align: middle;
  border: 1px solid #000;
}

.imgcontainer img {
  float: left;
  width: 200px;
  height: 200px;
  border: 0;
}   

.imgcontainer a {
  display: block;
  width: 200px;
  height: 200px;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
}  

.imgcontainer a:hover img {
  margin-right: -200px;
}

.imgcontainer a .desc {
  display: table-cell;
  vertical-align: middle;
  border-spacing: 0;
  border-collapse: collapse;
  width: 200px;
  height: 200px;
  padding: 10px;
  background: #cfc;
}

.imgcontainer a:hover .desc {
  background: #DDD;
  opacity: .75;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
}

実施例：こちら

および:最適な IE6/7 サポートあり

次のように HTMLのと<i></i>の間に要素を追加します。imgspan

<td class ="imgcontainer">
    <a href="#">
        <img src="http://www.bigjimsburgers.com/burger.jpg" alt="" />
            <i></i>
        <span class="desc">misaligned text</span>
    </a>
</td>

次に、条件付き CSS : (上記の主要なものの後にあるシートに追加します)

<!--[if LTE IE 7]>
<style type="text/css" media="screen">
.imgcontainer i {
  display: inline-block;
  width: 200px;
  height: 200px;  
  line-height: 200px;
  background: #DDD;
  filter: alpha(opacity=75);    
  vertical-align: middle;
  margin-right: -200px;
}

.imgcontainer a .desc {
    display: none;
    width: 180px;
    height: auto; 
}

.imgcontainer a:hover .desc {
    display: inline-block;
    background: transparent;    
}

</style>
<![endif]-->

または- 余分な HTML 要素または適切な垂直方向のセンタリングなし

IE6/7 用の余分な HTML 要素を追加したくない場合は<i></i>、最初のソリューションをトップ パディング ソリューションと組み合わせることができます。これは、テキストを垂直方向に完全に中央寄せすることはできませんが、IE6/7 に適切なフォールバックを提供するはずです。

この場合、IE 条件付き CSS は次のようになります。

<!--[if LTE IE 7]>
<style type="text/css" media="screen">
    .imgcontainer a .desc {
        display: none;
        padding: 40px 10px 10px 10px;
        width: 180px;
        height: 150px; /* if adding to top padding, adjust height accordingly */
    }

    .imgcontainer a:hover .desc {
        display: inline-block;
        filter: alpha(opacity=75);      
    }
</style>
<![endif]-->

アップデート

コメントに従って、これを機能させ、親テーブルの境界線の間隔を保持するには、テーブル CSS を削除します

table {
/*
  table-layout: fixed;
  width: 403px;
  border-collapse: collapse;
  border-spacing: 0;
*/
}

次に、に追加 border-spacing: 0;しますa

.imgcontainer a {
  display: block;
  width: 200px;
  height: 200px;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  border-spacing: 0;
}

上記を追加すると、spanに設定されている は親テーブルdisplay: table-cell;の を継承しませんborder-spacing

ボーダー間隔を使用した作業例

于 2011-05-27T10:04:15.593 に答える
3

ここにライブデモがあります：

http://jsfiddle.net/CKRZg/23/

新しい CSS は次のとおりです。

.

imgcontainer {
    overflow: hidden;
    float: left;
    position: relative;
}

.imgcontainer img {
    float: left;
    padding: 5px;
    background: #fff;
    width: 500px;
    height: 500px;
}

.imgcontainer a .desc {
    display: none;
    font-size: 1.2em;
}

.imgcontainer a:hover {
    cursor: pointer;
    text-decoration: none;
}

.imgcontainer a:hover .desc {
    display: block;
    text-align: center;   
    width:500px; 
    line-height:500px;   
    background: #111;
    filter: alpha(opacity=75);
    opacity: .75;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    color: #fff;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 500px;
    height: 500px;
}
于 2011-05-25T23:17:14.673 に答える
1

パディングを使用して行うこともできます。これは、折り返されたテキストを処理します。

.imgcontainer {
    overflow: hidden;
    float: left;
    position: relative;
}

.imgcontainer img {
    float: left;
    padding: 5px;
    background: #fff;
    width: 500px;
    height: 500px;
}

.imgcontainer a .desc {
    display: none;
    font-size: 1.2em;
    padding: 50% 0;
}

.imgcontainer a:hover {
    cursor: pointer;
    text-decoration: none;
}

.imgcontainer a:hover .desc {
    display: -webkit-box;
    display: -moz-box;
    display: block;
    -webkit-box-align: center;             
    text-align: center;   
    background: #111;
    filter: alpha(opacity=75);
    opacity: .75;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    color: #fff;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 500px;
    height: 500px;
}
于 2011-05-25T23:33:03.040 に答える
0

ここに別の方法があります。ただし、IE6 では動作しません。

CSS:

* { margin:0; padding:0 }
.desc { position:relative; display:inline-block }
.desc img { vertical-align:middle }
.desc span { position:absolute; left:0; width:100%; height:100%; line-height:100px; background:black; text-align:center; color:white; display:none }
.desc:hover span { display:inline-block }

HTML:

<a href="#" class="desc">
    <img src="http://www.uploadarchief.net/files/download/troll_face.jpg" width="100" height="100" alt="" />
    <span>Description</span>
</a>
于 2011-05-25T23:40:56.253 に答える
0

使用display:block、display:boxは無効です。これにより、水平方向のセンタリングが修正されます。

html はページの垂直方向のレイアウトに関係するものではなく、水平方向のみに関係するため、垂直方向のセンタリングはもう少し注意が必要です。

参照: CSS で使用される垂直方向の位置合わせは何ですか?

于 2011-05-25T23:19:51.460 に答える