リアクトブートストラップ - 画像を縦に並べる方法

Question

現時点では私の画像は縦にセンタリングされておらず、修正できないようです。

<Grid> 
    <Row className={styles.contain}> 
    <Col md={6} md={4} > 
    <div className={styles.testing> 
     <img src="https://docs.google.com/uc?id=0B0huBtqYaof7NFV6Nnpkalk5cEU" /> 
    </div> 
    </Col> 
    <Col md={6} md={4} > 
    <img src="https://docs.google.com/uc?id=0B0huBtqYaof7NFV6Nnpkalk5cEU" /> 
    </Col> 
    <Col md={6} md={4} > 
    <img src="https://docs.google.com/uc?id=0B0huBtqYaof7NFV6Nnpkalk5cEU" /> 
    </Col> 
    </Row> 
<Grid> 

、ここでCSSです：

.contain{ 
height:100%; 

} 
.testing{ 
    vertical-align: middle; 
    display:inline-block; 
} 

これは、画像に影響を及ぼしませんでした。

Answer 1

ブートストラップのバージョンによって異なります。ブートストラップ3ではなく4であると仮定します（Boostrap Reactの代わりにReactストラップを書いたでしょう）。

B3の列は既定でフローティングされています。浮動小数点数は、既に知っているように縦に並んでいません。したがって、display-inline：ブロックを列に適用し、次にvertical-align：middleを適用することができます。そうすることで有名人の4px gapに直面します。

またflexboxesを使用することができますが、代わりにB3を "ハッキング" の、あなたはそれからちょうどB4で行く必要があります。

注1）：あなたは< <のdivクラス名= {styles.testing}>ということを必要としません。/div>

注2：< Col md = {6} md = {4}>は良くありません。ここで何もしないでmd属性を繰り返します。