1

良い一日

幅と高さが定義されている場合、要素のセンタリングは簡単です。

幅：500px; 高さ：400px;

流体レイアウトに問題があります：

しかし、サムネイル画像を拡大するために使用するモーダルポップアップ（ライトボックス）があります...：

問題は、中央に配置できないことです。左上に浮きます...完全に中央に配置する必要があります。垂直方向と水平方向です。

これが私のモーダルポップアップコードです。JSFIDDLEも参照して、意味を確認してください（ビューポートのサイズを変更してみてください）

HTML：

<div id="imageModal">
    <div id="close_button">X</div>
    <div id="imageHolder"></div>
</div>

CSS：

#articleFeatured img{
    width: 200px;
    height: 113px;
}
#imageModal {
    position: fixed;
    z-index: 1024;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(50, 50, 50);
    background: rgba(0, 0, 0, 0.6);
    vertical-align: middle;
}
#imageModal #imageHolder {
    display: table;
    vertical-align: middle;
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #0088cc;
}
#imageModal #imageHolder img {
    max-width: 100%;
    max-height: 100%;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}
#close_button {
    position: absolute;
    z-index: 9999;
    opacity:0.8;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter:alpha(opacity=80);
    display: inline-block;
    max-width: 45px;
    max-height: 45px;
    width: 100%;
    height: 100%;
    float: left;
    top: 0;
    left: 0;
    padding: 10px;
    cursor: pointer;
}
4

4 に答える 4

1

これは、未知の幅/高さを中央に配置する方法です：http: //jsfiddle.net/nhGLH/2/

HTML

<div class='centered'>
    you can change the width and height 
    of this and it will always be centered
</div>

CSS

.centered{ 
    // mus have width & height 
    width:400x;  
    height:250px; 
    // absolute position must have all directions set to "0"
    position:absolute;
    left:0; right:0; top:0; bottom:0;
    // final centering trick
    margin:auto;
}
于 2013-03-23T11:15:49.363 に答える
1

幅と高さに流体寸法を定義するのと同じように、ポジショニングプロパティに流体寸法を追加する必要があります：上、左など

あなたが持っているとしましょう：

#parent {

    width: 50%;
    height: 50%;
    position: absolute;
    /*(or relative)*/
    top: 25%;
    left: 25%;

    text-align: center;
}

上のサイズ+左のサイズ=幅または高さの残りのサイズ。したがって、25％（上）+ 25％（左）= 100％-50％（幅）..

したがって、別の幅を使用すると、高さは次のようになります。

#parent {

    width: 20%;
    height: 20%;
    position: absolute;
    /*(or relative)*/
    top: 40%;
    left: 40%;

    text-align: center;
}

フィドルを見る

于 2013-03-27T14:16:35.233 に答える
0

次のCSSを与える、

#imageModal #imageHolder img {
        margin 0 auto;
}
于 2013-03-23T10:55:57.610 に答える
0

正しく動作させるために、いくつかの場所を変更する必要がありました。マークアップを少し変更し、垂直方向の配置をサポートするためにいくつかのCSSを追加しました。

<div id="articleFeatured">
    <div class="img">
        <div class="close_button">X</div>
        <img src="http://lorempixel.com/200/115/food/1">
    </div>
</div>

動作デモを確認してください：http：//jsfiddle.net/yKezB/12/

于 2013-03-23T11:15:07.397 に答える