如何在css中對齊兩個圖像inline

我有一個div中有兩個圖像，我想要在div中水平居中對齊兩個圖像。我試過了，但我無法得到它，任何人都可以幫忙嗎？事先，CSS代碼和圖像如何在css中對齊兩個圖像inline

感謝附：

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

來電圖像一個DIV浮動右圖像中的兩個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 - 你能接受的答案，如果作品 –

您可以使用Flex

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中對齊兩個圖像inline

回答

相關問題