3

divとdiv内の画像があります。画像サイズは異なります。

水平方向と垂直方向の中央に配置したい。Cssverticlealignが機能していないようです。

トリックはありますか？php、css、Jqueryを使用できます

4

3 に答える 3

2

を使用して水平方向に整列させることができます

margin: 0 auto;

CSSでは垂直方向の中央揃えは簡単ではありません（少なくともIE6 / 7ではそうではありません）。テーブルを使ってそれを行うのは比較的簡単です。

jQueryを利用できると言います。JavaScriptを適用することで、あらゆるブラウザを操作できます。ただし、もちろんJSが有効/サポートされていないと、ページは正しく表示されません。

CSSのvertical-alignプロパティは、display: table-cell（で何かに含まれている必要があります）でのみ使用することを目的としていdisplay: tableます。

あなたが持っていた場合

<div id="container"><img src="my-image.png" alt="" /></div>

jQueryを使用して、このように中央揃えにすることができます（plexusによる提案のように）

var imageSrc = $('#container img').attr('src');

$('#container').css({ backgroundImage: 'url(' + imageSrc + ')', backgroundPosition: 'center enter' });
于 2009-10-20T04:59:38.780 に答える
1

使い方がわからないので、おそらく私の解決策は合わないでしょう。

画像をdiv内の「background-image」として実装すると、「background-position」で簡単に中央に配置できます。

#div {
background-image: url(./image.png);
background-position: center center;
}
于 2009-10-20T22:55:50.130 に答える
0 
<style>
    .image-container {
        position:relative;
        width:300px;
        height:300px;
        background:#ccc;
    }
    .image-container .image {
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%, -50%);
        background:red;
        height:100px;
        width:100px;
    }
</style>
<div class="image-container">
    <img class="image" src="****.jpg"/>
</div>
于 2021-11-02T10:34:45.300 に答える