Bootstrap中的列 - 在列中定位圖像 - 我試圖以圖像爲中心

這裏的示例http://patrickmchugh.com/testing/template.html 我使用Bootstrap爲每個設備斷點構建了包含相關網格的模板。它工作的很好，但我想將圖像左側和右側的箭頭定位在所有設備上的頁面的一半處。我將這些專欄變成了黃色以強調這篇文章的專欄。我不需要列是必然equal.I已嘗試填充，邊距等似乎無法得到它。有什麼建議麼？預先感謝您的幫助。Bootstrap中的列 - 在列中定位圖像 - 我試圖以圖像爲中心

<style> 
body{padding: 0 10px; 
} 

[class*="col-"] { 
    padding: 1em 0; 
    background-color: rgba(255,204,51,1); 
    border: 1px solid rgba(204,204,102,1); 
} 
.container img { 
    max-height:100%; 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
} 

</style> 

</head> 

<body> 
<div class="container"> 

    <div class="row"> 
     <div class=" col-lg-2 col-md-2 col-sm-1 col-xs-1"> 
      <span class="visible-lg"><a href="#"><img src="images/leftArrow.png"></a></span> 
      <span class="visible-md"><a href="#"><img src="images/leftArrow.png"></a></span> 
      <span class="visible-sm"><a href="#"><img src="images/leftArrow.png"></a></span> 
      <span class="visible-xs"><a href="#"><img src="images/leftArrow.png"></a></span> 
     </div><!--left arrow--> 


     <div class="col-lg-8 col-md-8 col-sm-10 col-xs-10"> 
      <span class="visible-lg"><img src="images/carton-house.jpg" alt="Fashion" class="img-responsive"></span> 
      <span class="visible-md"><img src="images/carton-house.jpg" class="img-responsive" alt="fashion"></span> 
      <span class="visible-sm"><img src="images/carton-house.jpg" class="img-responsive" alt="fashion"></span> 
      <span class="visible-xs"><img src="images/carton-house.jpg" class="img-responsive" alt="fashion"></span> 
     </div><!--Image--> 

     <div class="col-lg-2 col-md-2 col-sm-1 col-xs-1"> 
      <span class="visible-lg"><a href="#"><img src="images/rightArrow.png"></a></span> 
      <span class="visible-md"><a href="#"><img src="images/rightArrow.png"></a></span> 
      <span class="visible-sm"><a href="#"><img src="images/rightArrow.png"></a></span> 
      <span class="visible-xs"><a href="#"><img src="images/rightArrow.png"></a></span> 
     </div><!--right arrow--> 
    </div> <!--row--> 

</div><!--container-->

來源

2013-11-14 paddym

試試下面的CSS：

.container img { 
    max-height:100%; 
    display: block; 
    position: relative; 
    left: 0; 
    right: 0; 
}

這爲我工作了，所以我認爲這將會爲工作過。

來源

2013-11-14 10:30:07

沒有運氣與那Kobus，我仍然有任何一方崩潰列。 – paddym

我的歉意 - 就我而言，這個職位是「固定的」。不知道這是爲什麼結果不同？ –

插入 '箭' 級，你必須<div class="col-lg-2 col-md-2 col-sm-1 col-xs-1">

前。 <div class="col-lg-2 col-md-2 col-sm-1 col-xs-1 arrow-right">

.row { 
    position:relative; 
}  

.arrow-left { 
    position: absolute; 
    top: 50%; 
    left: 0; 
    height: 50px; 
} 

.arrow-right { 
    position: absolute; 
    top: 50%; 
    right: 0; 
    height: 50px; 
}

來源

2013-11-14 10:36:19

它非常接近！看看新的鏈接，左側的箭頭隱藏在圖片後面.http：//patrickmchugh.com/testing/template2.html – paddym

Bootstrap中的列 - 在列中定位圖像 - 我試圖以圖像爲中心

回答

相關問題