對齊引導列的兩個圖像行內中心

-1

我有一個html模板，我想將bootstrap集成到它中。我目前在引導列中有兩個圖像。我想保持這兩個圖像對齊並且彼此相鄰，同時在列的中間將它們彼此連接。當我嘗試它時，不是將它們置於中心位置，就是將它們置於彼此之上，而我不想要。我想兩個圖像爲中心，彼此相鄰...這裏是我的代碼：對齊引導列的兩個圖像行內中心

<div class="row justify-content-center"> 

     <div class="col-xl-6"> 
      <img class="welcome-icon-size align-top center-block" src="{% static 'images/untitled-2.png'%}" alt="Generic placeholder image"> 
      <img class="welcome-name-size no-margin-top center-block" src="{% static 'images/untitled-1.png'%}" alt="Generic placeholder image"> 
     </div> 

    </div>

這裏是CSS：

.no-margin-top { 
    margin-top: 0px !important; 
} 

.no-padding { 
    padding: 0em !important; 
} 

.welcome-icon-size { 
    height: 9.55em !important; 
} 

.welcome-name-size { 
    height: 14em !important; 
} 

.welcome_title { 
    font-size: 1em !important 
} 

.welcome-center-items { 
    align-items: center !important; 
} 

.center-block { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
}

這裏是我的形象看起來像：

我希望它看起來像以下但集中::

中的圖像在屏幕截圖不居中以上它們對齊到列

來源

2017-12-02 Omar Jandali

可能的重複[如何將兩個圖像並排放入div使用bootstrap？]（https://stackoverflow.com/questions/26647890/how-to-place-two-image-side-by-side -into-a-div-using-bootstrap） – Rob

哪裏是ALIGN-頂部的CSS的左側？我不知道這個班是做什麼的。從您的圖片

刪除對齊，頂部和無邊距頂班
添加類我對齊或將其命名爲任何你想要的（但是在CSS類名應該是相同的 - ：試試這個記住）

並在CSS它應該看起來像：

.my-align { margin:0;padding:0;width:50%;float:left; }

是你想要的嗎？

來源

2017-12-02 22:23:40 Trueman

我添加了一個我希望它看起來像的圖像，但它的中間居中。請看帖子我已經更新了 –

它很有用。一件事是，它將兩幅圖像調整爲適合列的整個寬度。有沒有什麼辦法可以讓圖像保持原來的大小，並將圖像居中放置，而不會影響圖像。 –

我得到它的工作 –

對齊引導列的兩個圖像行內中心

回答

相關問題