2015-10-15 61 views
0

enter image description here中心2張圖像後利用對方內線行引導

我怎樣才能把2個應用程序下載鏈接的圖像中的class="row"中間?

<div class="container"> 
     <div class="row"> 
      <div class="col-xs-4" style="text-align:right"><img  src="images/bear.png" alt="bear" /></div> 
      <div class="col-xs-8 first-row-second-column"> 
       <div class="row"> 
        <h3 class="col-xs-12" style="text-align:center">Καλώς ήρθατε, στα </h3> 
       </div> 
       <div class="row"> 
        <h3 class="col-xs-12" style="text-align:center">Κάνε σήμερα τη συνδρομή σου και κέρδισε7 ΜΕΡΕΣ ΔΩΡΕΑΝ</h3> 
       </div> 
       <div class="row"> 
        <h3 class="col-xs-12" style="text-align:center">Αν είσαι στην Ελλάδα στείλε τώρα SMS από το κινητό σου ZOU στο 54790 και μπες στον κόσμο των Ζουζουνιών.</h3> 
       </div> 
       <div class="row"> 
        <h3 class="col-xs-12" style="text-align:center">Αν ζεις στο εξωτερικό κάνε την συνδρομή σου μέσα από την εφαρμογή.</h3> 
       </div> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-xs-12"> 
       <div><img src="images/app_store_logo.png" alt="app_store_logo" /></div> 
       <div><img src="images/google_play_logo.png" alt="google_play_logo" /></div> 
      </div> 
     </div> 
    </div> 
+0

嘗試/應用'margin:auto;最大寬度:100%'到'img'元素。我建議你創建一個小提琴,所以我們可以檢查它 –

+0

請發佈您的jsfiddle。 – Alex

回答

1

沒有樣品小提琴什麼的,我不能肯定這將如何看,但我估計這會給你想要的東西。

<div class="container"> 
     <div class="row"> 
      <div class="col-xs-4" style="text-align:right"><img  src="images/bear.png" alt="bear" /></div> 
      <div class="col-xs-8 first-row-second-column"> 
       <div class="row"> 
        <h3 class="col-xs-12" style="text-align:center">Καλώς ήρθατε, στα </h3> 
       </div> 
       <div class="row"> 
        <h3 class="col-xs-12" style="text-align:center">Κάνε σήμερα τη συνδρομή σου και κέρδισε7 ΜΕΡΕΣ ΔΩΡΕΑΝ</h3> 
       </div> 
       <div class="row"> 
        <h3 class="col-xs-12" style="text-align:center">Αν είσαι στην Ελλάδα στείλε τώρα SMS από το κινητό σου ZOU στο 54790 και μπες στον κόσμο των Ζουζουνιών.</h3> 
       </div> 
       <div class="row"> 
        <h3 class="col-xs-12" style="text-align:center">Αν ζεις στο εξωτερικό κάνε την συνδρομή σου μέσα από την εφαρμογή.</h3> 
       </div> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-xs-4"></div> 
      <div class="col-xs-8"> 
       <img src="images/app_store_logo.png" alt="app_store_logo" /> 
       <img src="images/google_play_logo.png" alt="google_play_logo" /> 
      </div> 
     </div> 
    </div> 

這應該把兩個圖像並排通過刪除它們所含的div,並使用引導,使一個空列在第二行,以符合上述與熊的一個。如果圖片太接近,您可能需要在CSS文件中製作邊距規則。

+0

把'.row'分成兩個半元素,例如'.row> .col-md-6> img .col-md-6> img',然後使用'margin:auto; max-wdith:100%'用於圖像? –