CSSで2つのイメージをインラインに整列する方法

divに2つのイメージがあり、イメージの両方をdivの中央に水平に整列させたいとします。私は試しましたが、私はそれを手に入れることができません、誰も助けることができますか？事前にCSSで2つのイメージをインラインに整列する方法

おかげで、CSSコード、画像が添付されています

div { 
    height: 100%; 
    width: 100%; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 

.subscribeLogo { 
    max-height: 100%; 
    max-width: 100%; 
    object-fit: contain; 
}

出典

2017-08-02 wali

コール画像1は、2つのdivフロートは左右の画像を浮遊し、両側 –

あなたは以下のようにそれを行うことができます。

テスト - >https://codepen.io/anon/pen/xLOeZR

HTML

<div> 
    <img src="https://cdn3.droom.in/photos/images/drm/super-cars.png" width="100"> 
    <img src="https://cdn3.droom.in/photos/images/drm/super-cars.png" width="100"> 
</div>

CSS

div{ 
    width:500px; 
    background-color:yellow; 
    text-align:center; 
    vertical-align:middle; 
}

出典

2017-08-02 10:15:27

@faizyに左詰め、右を呼び出すDIV - 作品ならば、あなたは答えを受け入れることができます –

あなたはフレックス

plunkerデモを使用してそれを行うことができます：https://plnkr.co/edit/ni0Z7NGNPDxYzgxBTuOd?p=preview

.box { 
 
    width: 500px; 
 
    background: lightgreen; 
 
} 
 

 
.image-container { 
 
    display: flex; 
 
    justify-content: center; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body> 
 
    <div class="box"> 
 
    lorem ispsium 
 
    <br> <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <div class="image-container"> 
 
     <a href="https://placeholder.com"> 
 
     <img src="http://via.placeholder.com/140x100" /> 
 
     </a> 
 
     <a href="https://placeholder.com"> 
 
     <img src="http://via.placeholder.com/140x100" /> 
 
     </a> 
 
    </div> 
 

 
    <br> 
 
    <br> 
 
    </div> 
 
</body> 
 

 
</html>

出典

2017-08-02 10:17:34

CSSで2つのイメージをインラインに整列する方法

答えて

関連する問題