如何使文本留在圖像下（響應式設計）

我在原始圖像中使用3個圖像（使用Bootstrap）。在每張圖片下應該有一個標題，一個鏈接和一段文字。所有這三個元素都應該在圖像下居中。隨着屏幕變小，圖像會一個接一個地下移，而這三個元素必須位於圖像下方。我管理一個標題和鏈接要做到這一點，它的工作原理是需要：如何使文本留在圖像下（響應式設計）

<div class="col-md-4"> 
<figure> 
    <img class="img-responsive" src="..." alt="ProjectName"> 
    <figcaption> 
    <h3 class="text-uppercase">Project Name</h3> 
    <p><a href="http://...">Link to project</a></p> 
    </figcaption> 
</figure> 
</div>

但是，當我加了一段文字這樣

<div class="col-md-4"> 
<figure> 
    <img class="img-responsive" src="..." alt="ProjectName"> 
    <figcaption> 
    <h3 class="text-uppercase">Project Name</h3> 
    <p><a href="http://...">Link to project</a></p> 
    <p>Some text</p> 
    </figcaption> 
</figure> 
</div>

所有三個要素（標題，鏈接和文本）隨着屏幕變小，不要停留在圖像下方。相反，它們排列在屏幕的中心。

這裏是我的CSS樣式：

figure { 
    display: inline-block; 
} 

figure figcaption { 
    text-align: center; 
}

任何想法如何修復此豪？

來源

2017-10-21 mst81

您使用的引導使用？ –

你能提供一個jsfiddle嗎？ –

使用text-center工具引導類，然後media query到text-align:left

@media (max-width:640px) { 
 
    .text-center { 
 
    text-align: left !important/* important only for demo*/ 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="col-md-4"> 
 
    <figure> 
 
    <img class="img-responsive" src="//placehold.it/600" alt="ProjectName"> 
 
    <figcaption class="text-center"> 
 
     <h3 class="text-uppercase">Project Name</h3> 
 
     <p><a href="http://...">Link to project</a></p> 
 
     <p>Some text</p> 
 
    </figcaption> 
 
    </figure> 
 
</div>

來源

2017-10-22 00:01:17 dippas

謝謝@dippas！正是我在找什麼 – mst81

-1

如果您使用的引導再做這樣

if you are using bootstrap then try like this 

    <div class = "row"> 
    <div class = "col-md-4"> 
    <div class = "thumbnail"> 
    <img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder 
     thumbnail"> 
    </div> 
    <div class = "caption"> 
    <h3>Thumbnail label</h3> 
    <p>Some sample text. Some sample text.</p> 
    </div> 
</div> 
</div>

來源

2017-10-22 00:00:00

如何使文本留在圖像下（響應式設計）

回答

相關問題