8

私は非常に単純な HTML/CSS の問題を抱えていますが、これも頻繁に尋ねられますが、残念ながら調査を行った後も問題が解決しませんでした。

Bootstrap (3 RC2) を使用しており、画像を行の中央に垂直方向に配置したいと考えています。

<div class="row">
    <div class="col-xs-10 col-md-6" id="main">
        <p><img src="http://placekitten.com/500/700" alt="" width="500" height="700" /></p>
    </div>
    <div class="col-xs-1 col-md-1" style="display: inline-block; vertical-align: middle;">
        <img src="http://placekitten.com/100/116"  width="100" height="116" />
    </div>
</div>

2 番目の小さいイメージは、 の中央で垂直方向の中央に配置する必要がありdiv.rowます。しかし、うまくいかないようです。このフィドルを使用して問題を確認できます: http://jsfiddle.net/veQKY/2/

Bootstrap の応答性を損なわないようにする必要があります。つまり、幅の狭いデバイスを使用する場合、2 番目の画像を最初の画像の下に水平にステープルする必要があります。

4

8 に答える 8

3

それはうまくいきます。これをそのセクションに使用します。縦横に並べてあります。

display:flex;
justify-contents:center;
align-items:center;
于 2014-07-12T11:45:07.407 に答える
1

ポイントは、列の高さを同じにする必要があるため、次のようなことができるかもしれません。

あなたのhtml

<div class="container container-sm-height">
    <div class="row row-sm-height">
        <div class="col-xs-12 col-md-6 col-sm-height">
            <img src="http://placekitten.com/500/700" alt="" width="500" height="700" />
        </div>
        <div class="col-xs-12 col-md-1 col-sm-height col-middle">
             <img src="http://placekitten.com/100/116"  width="100" height="116" style="display: inline-block; vertical-align: middle;" />
        </div>
    </div>
</div>

あなたのCSS

/* columns of same height styles */
.container-xs-height {
    display:table;
    padding-left:0px;
    padding-right:0px;
}
.row-xs-height {
    display: table;
}


[class*="col-"] {
    float: left;
    display: block;
    vertical-align: middle;
    text-align: center;
}


img{
    max-width: 100%;
    height: auto;
}

@media (min-width: 992px) {


    [class*="col-"] {
        float: none;
        display: table-cell;
        vertical-align: middle;
    }
}
@media (min-width: 1200px) {
    .container-lg-height {
        display:table;
        padding-left:0px;
        padding-right:0px;
    }
    .row-lg-height {
        display:table-row;
    }
    .col-lg-height {
        display:table-cell;
        float:none;
    }
}

その大部分はここから取られています: http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height

ここでフィドルを見ることができます

http://jsfiddle.net/dmdcode/P83kW/

于 2014-07-16T13:05:55.900 に答える
0

おそらく非常にエレガントなソリューションではありませんが、これはうまくいくようです：

<div class="row">
    <div class="col-xs-10 col-md-6" id="main">
        <p><img src="http://placekitten.com/500/700" alt="" width="500" height="700" /></p>
    </div>
    <div class="col-xs-1 col-md-1" style="display: inline-block; vertical-align: middle; margin-top:-58px; padding-top:50%;">
        <img src="http://placekitten.com/100/116"  width="100" height="116" valign="middle" />
    </div>
</div>

http://jsfiddle.net/4LMKe/

于 2013-08-15T13:53:19.397 に答える
0 
<div class="row">
    <div class="col-xs-10 col-md-6" id="main">
        <p><img src="http://placekitten.com/500/700" alt="" width="500" height="700" /></p>
    </div>
    <div class="col-xs-1 col-md-1" style="display: inline-block; vertical-align: middle;">
        <div class="" style="display: table; height: 700px; #position: relative; overflow: hidden;">
          <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
            <div class="" style=" #position: relative; #top: -50%">
              <img src="http://placekitten.com/100/116"  width="100" height="116" />
            </div>
          </div>
        </div>
    </div>
</div>

そのdivをラップする必要があります。

于 2013-08-15T10:03:15.390 に答える
0 
<div class="row">
    <div class="col-xs-10 col-md-6" id="main">
        <p><img src="http://placekitten.com/500/700" alt="" width="500" height="700" /></p>
    </div>
    <div class="col-xs-1 col-md-1" style="display: inline-block; top:50%;margin-top:-58px;position:absolute;">
        <img src="http://placekitten.com/100/116"  width="100" height="116" />
    </div>
</div>

vertical-align は要素内でのみ使用されます

この場合、画像は 100(w) x 116(h) です。

最高：50％; 次にマージン - 画像の高さの上半分 (58px)

次に、画像は垂直方向に中央揃えになります

アップデート

別の方法

<div style="background:url(http://placekitten.com/500/700) center no-repeat;width:500px;height:700px;position:relative;">
      <img src="http://placekitten.com/100/116"  width="100" height="116" style="position:absolute;top:50%;margin-top:-58px;right:0;"/>         
</div>
于 2013-08-15T09:52:05.430 に答える
0 
<div class="row">
    <div class="col-xs-10 col-md-6" id="main">
        <p><img src="http://placekitten.com/500/700" alt="" width="500" height="700" /></p>
    </div>
<div class="col-xs-1 col-md-1 middle-img">
    <img src="http://placekitten.com/100/116"  width="100" height="116" />
</div>

画像の親 div に CSS を適用する 

.middle-img {display: table-cell;float: none;height: 300px /*any value*/;vertical-align: middle;}
于 2013-12-30T07:43:12.727 に答える