Css佈局引導覆蓋

Question

我知道有一個類似的問題，但我已經嘗試過他們都失敗了。 在這個例子中，有4行每個都有一個圖像和一個鏈接。

我想每個鏈接覆蓋每個圖像，但它似乎總是把整個寬度作爲相對。

IE "Mann"中的鏈接實際上是"Badetuch"。

我只是想設置CSS，使每個測試類在每個圖像的水平中心。

單獨設置它們並不理想，對於col-2 .test，我將它設置爲30％，這應該是50％，但絕對是基於col2中的圖像。

我使用bootstrap的views模塊來創建網站。

希望這是有道理的。任何幫助將不勝感激。 Ta

Answer 1

哦，男孩，你是用桌子構造的嗎？準備好去內臟！ （不是由我 - 我會留下其他人）。另外，在SO上發佈問題時，最好在編輯工具欄中使用「JS/CSS/HTML代碼片段」選項，以便人們可以通讀代碼並看到結果而不是點擊他們必須放大閱讀的小圖片。

現在你的問題 - 這是你做的。

.view-content > .row > div { 
 
    position: relative; 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 1px solid black; 
 
    box-sizing: border-box; 
 
} 
 

 
.overlay { 
 
    width: 100%; 
 
    text-align: center; 
 
    position: absolute; 
 
    top: 50%; 
 
    margin-top: -1em; 
 
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
<div class="region region-content"> 
 
    <section id="block-system-main" class="block block-system clearfix"> 
 
    <div class="view view-produkte view-id-produkte view-display-id-page view-dom-id-WhyDidYouDoThisClassMakeThatNumberAnIDInstead"> 
 
     <div class="view-content"> 
 
     <div class="row"> 
 
      <div class="col-xs-3"> 
 
      <img src="https://bytesizemoments.com/wp-content/uploads/2014/04/placeholder.png" alt="" class="img-responsive"> 
 
      <a href="#" class="overlay">Link 1</a> 
 
      </div> 
 
      <div class="col-xs-3"> 
 
      <img src="https://bytesizemoments.com/wp-content/uploads/2014/04/placeholder.png" alt="" class="img-responsive"> 
 
      <a href="#" class="overlay">Link 2</a> 
 
      </div> 
 
      <div class="col-xs-3"> 
 
      <img src="https://bytesizemoments.com/wp-content/uploads/2014/04/placeholder.png" alt="" class="img-responsive"> 
 
      <a href="#" class="overlay">Link 3</a> 
 
      </div> 
 
      <div class="col-xs-3"> 
 
      <img src="https://bytesizemoments.com/wp-content/uploads/2014/04/placeholder.png" alt="" class="img-responsive"> 
 
      <a href="#" class="overlay">Link 4</a> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </section> 
 
</div>

首先，你寫做一個「三欄」，「COL-XS-3」（爲XS設定畫面尺寸被傳遞到更大尺寸，除非另有說明）。 我設置父div的邊距和填充爲0，因爲在示例中您的框之間沒有任何空格。我還給了他們一個邊界來區分不同的圖像和邊框的大小，以便他們能夠正確地適合他們的列。因此，要獲得鏈接在div中的水平居中（這是關鍵 - 它與圖像在同一列div內），我將寬度設置爲100％，這是100％的父級（ 「col-xs-3」），然後給它一箇中心的文本對齊。錨標籤默認是內聯元素;它們只與包含的文本要求的寬度相同，所以設置文本對齊：居中但不設置寬度：100％不會執行任何操作，因爲您基本上是將文本居中放置在寬度中，因此沒有可見的效果。設置寬度：100％使其佔據父div的全部寬度，這使得它可以居中放置空間。

現在，爲了使它在圖像頂部垂直居中，我給它定位：絕對。這可以防止它脫離圖像的方式。相對於第一個遇到位置非靜態值的父代，位置爲absolute的元素執行所要求的任何操作。 （這就是爲什麼我將父div的內容設置爲相對的，但沒有給它一個頂部或左邊的值來移動它。）在我將它設置爲絕對位置後，我必須告訴它相對於該父項的位置，我想讓它走到中間。圖像是父級包含的最大元素，因此父級的高度和寬度與圖像的高度和寬度相同。我將錨標記的頂部值設置爲50％，這表示它將向下移動父項高度的50％。但是，這是使用錨點標籤的左上角作爲移動點，因此鏈接不是很垂直居中 - 它有點低。這就是爲什麼我將margin-top設置爲-1em。1em =默認字體大小。因此，margin-top的-1em指示它以「負頂部」方向移動 - 也就是說 - 以等於字體大小的單位移動。現在，基線相對於父元素是垂直居中的。

讓我來告訴你閱讀Bootstrap文檔。你沒有正確使用它。祝你的項目好運。