流體圖像中的中心文字

我有幾張流體圖像，我想浮起並堆疊在一起。例如，我將img-div的寬度設置爲50％，並在每行中堆疊兩個圖像。根據瀏覽器大小，圖像尺寸也會增加。同時，我希望能夠在每幅圖像的中間放置一段文字，該文字漂浮在圖像的中央並保留在圖像的中央。我的問題是文本不集中。當我設置img爲絕對中心，但堆疊會搞砸。流體圖像中的中心文字

任何想法如何通過CSS只能做到這一點？

這裏是我的HTML代碼：

<div id="container"> 
    <!-- image1 --> 
    <div class="img-div"> 
     <a href="#"> 
     <img src="images/image1.jpg" /> 
     <div class="txt-div"> 
      <p>Some text goes here!</p> 
     </div> 
     </a> 
    </div> 

    <!-- image2 --> 
    <div class="img-div"> 
     <a href="#"> 
     <img src="images/image2.jpg" /> 
     <div class="txt-div"> 
      <p>Another text.</p> 
     </div> 
     </a> 
    </div> 

    <!-- image3 --> 
    <div class="img-div"> 
     <a href="#"> 
     <img src="images/image3.jpg" /> 
     <div class="txt-div"> 
      <p>Some more text.</p> 
     </div> 
     </a> 
    </div> 

    <!-- image4 --> 
    <div class="img-div"> 
     <a href="#"> 
     <img src="images/image4.jpg" /> 
     <div class="txt-div"> 
      <p>Last text.</p> 
     </div> 
     </a> 
    </div> 

</div>

這裏是我的CSS：

.img-div { 
    width: 50%; 
    float:left; 

    a { 
    position: relative; 
    display: block; 
    height: 100%; 
    font-size: 0; 
    text-align: center; 
    } 

    a:before { 
    vertical-align: middle; 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    width: 0; 
    } 

    .txt-div { 
    vertical-align: middle; 
    position: relative; 
    z-index: 10; 
    display: inline-block; 
    font-size: medium; 

    p { 
     padding: 0; 
     margin:0; 
    } 

    } 

    img { 
    position: absolute; 
    width: 100%; 
    z-index: 9; 
    top: 0; 
    left: 0; 
    } 

}

來源

2014-03-03 user3376065

一個的jsfiddle將是有用的，但定位'p'絕對是一個開始。 –

你幾乎擁有了:)

使用position:relative/ absolute在圖像上繪製文本容器和使用中的僞:before和vertical-align技術中心您<p>。

.img-div { 
    width: 50%; 
    display:inline-block; 
    position: relative; 
} 
.img-div img { 
    width:100%; 
} 
a { 
    text-align: center;  
} 
.txt-div { 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    z-index:1; 
} 
.txt-div:before { 
    content:''; 
    padding-top:100%; 
    vertical-align:middle; 
    display:inline-block; 
} 
.txt-div p { 
    max-width:95%; 
    display:inline-block; 
    vertical-align:middle; 
}

DEMO：http://codepen.io/gc-nomade/full/Cxkqf

來源

2014-03-03 19:17:26

太棒了！很好的工作，並感謝您的幫助。 – user3376065

刪除div中p身邊，開始position:absolute;到p設置img到position:relative;的p現在去了img，如果我是正確的。將text-align:center;設置爲p以使其居中。（有時可能是件好事width:100%;的p太）

來源

2014-03-03 18:54:55 GeNyaa

好的答案，我正在接近！現在問題是我必須設置最高：50％，剩下50％將p設置在中間位置，但是您得到的是位於中心的p的左上角。我想看到p盒的中心固定在中心。你懂我的意思嗎？ – user3376065

你可以使用CSS背景圖像的每個圖像放置在一個動態調整大小DIV，然後簡單地浮動的div，他們會在任何空間填充，而不改變塊的位置級別的元素。在這種情況下，每個div都會根據它包含的圖像獲得唯一的ID，並且圖像的url將成爲div的背景圖像。唯一的缺點是，我可以看到，如果圖像被禁用，您將不會獲得替代文本，但您的div將保持指定的大小。並處於正確的位置。

來源

2014-03-03 19:12:24 sdforet

流體圖像中的中心文字

回答

相關問題