0 
<div class="box">
    <div class="pic">
        <img src="/images/img.png" class="img_pic" />
    </div>
</div>

.box {
    border: 1px solid #333;
    cursor: pointer;
    height: 73px;
    margin: 40px 42px 0 0;
    width: 269px;
}
.img_pic {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

画像（「img_pic」）も垂直方向に中央揃えにしたい。私が持っているものでは、水平にはできますが、垂直にはできません。試してみvertical-align: middle;ましたがうまくいきませんでしline-height: 73pxた。箱の高さが73px. 私はこれから抜け出す方法を理解できないようです。

水平方向のセンタリングを維持しながら、画像を垂直方向にセンタリングするにはどうすればよいですか?

4

4 に答える 4

2

画像をブロック要素にしないでください。インライン要素として、テキストとして中央に配置できます。次に、行の高さをボックスと同じに設定し、画像の垂直方向の配置をmiddleテキスト行の中央に配置するように設定します。

.box {
    border: 1px solid #333;
    cursor: pointer;
    height: 73px;
    margin: 40px 42px 0 0;
    width: 269px;
    text-align: center;
    line-height: 73px;
}
.img_pic {
    vertical-align: middle;
}

デモ: http://jsfiddle.net/AwgNy/

于 2013-09-05T22:16:53.947 に答える
1

vertical-align要素をブロックすることはできません。

画像の高さがわかっている場合は、`.box' にequal topand bottom marginon.img_plcまたは equal topand padding を配置できます。bottom

あなたが言ったように、それは可変高さであり、display: table-cell for .box を使用できますvertical-align: middle;

于 2013-09-05T22:13:49.620 に答える
0

このCSSデモをここで使用してください

.box {
    border: 1px solid #333;
    cursor: pointer;
    height: 73px;
    margin: 40px 42px 0 0;
    width: 269px;
    position:relative
}
.img_pic {
    display: block;
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    margin:auto
}
于 2013-09-09T12:42:55.313 に答える
0

画像のサイズがわかっている場合は、css でそれを実行し、margin を使用して画像を押し下げることができます。

margin-top:/*(box height / 2) - (image height / 2)*/;

または相対位置と絶対位置を使用します。

.box
{
    position:relative;
    /*other code*/
}

.image_pic
{
    position:absolute;
    top:/*(box height / 2) - (image height / 2)*/;
}

画像のサイズを保証できない場合は、javascript/jQuery を使用して画像の高さを取得し、上記と同じ式を使用してオフセットを計算する必要があります。margin-top次に、引き続き javascript/jQuery を使用して、画像の css を編集して、またはのオフセットを設定しtopます。

于 2013-09-05T22:25:20.737 に答える