如何在響應圖像上垂直居中文本？

如何在瀏覽器窗口重新調整大小時，讓這些圖像上的標題文字四處移動？我的實現很快捷，我需要一種方法來保持文本在窗口大小調整時不會滑動。如何在響應圖像上垂直居中文本？

<div class="row"> 
    <div class="col-md-6"> 
    <img src="http://placekitten.com/600/375" class="img-responsive" /> 
    <h2 class="homeImageLink"> 
     <span>Caption Text</span> 
    </h2> 
    </div> 
    <div class="col-md-6"> 
    <img src="http://placekitten.com/600/375" class="img-responsive" /> 
    <h2 class="homeImageLink"> 
     <span>Caption Text</span> 
    </h2> 
    </div> 
</div> 

.homeImageLink { 
    position: absolute; 
    top: 110px; 
    left: 0; 
    text-align: center; 
    width: 100%; 
} 

.homeImageLink span { 
    color: red; 
    font-weight: 300; 
    font-style: italic; 
    text-transform: uppercase; 
    letter-spacing: 15px; 
    pointer-events: none; 
}

來源

2014-05-21 drewwyatt

您是否嘗試過使用上的跨度COL-MD-偏移4 COL-MD-4級的？ – JanR

@JanR不，我沒有 - 我該如何處理垂直居中呢？ – drewwyatt

是的，從頭開始，它不會工作，我只是意識到你正在嘗試做什麼，它不會用於覆蓋文本 – JanR

只需添加一個類的父容器，使得它的相對位置。

.img-container { 
    position:relative; 
}

然後讓homeImageLink絕對在45％左右獲得最佳..

這將使它垂直居中..

.homeImageLink { 
    position: absolute; 
    top: calc(50% - 24px); //24px is font size of H1 I assume 
    left: 0; 
    text-align: center; 
    width: 100%; 
}

演示在這裏：http://codepen.io/anon/pen/bJadE

來源

2014-05-21 04:01:01

爲什麼最高：45％而不是50？ –

僅僅因爲文本高度需要一點點高度。 –

哦對，應該是明顯的 –

我來了與另一種解決方案，這是一個工作演示：

http://codepen.io/niente0/pen/jyzdRp

HTML：

<DIV class=wrapper> 
    <DIV class=divimage></DIV> 
    <DIV class=divtext>THIS IS A TEST</DIV> 
</DIV>

CSS：

HTML,BODY { 
    max-width:1200px; 
} 
.wrapper { 
    position:relative; 
    width:100%; 
    max-width:1200px; 
    height:100%; 
    min-height:320px 
} 
.divimage { position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background:url(https://thumbs.dreamstime.com/t/empty-red-banner-corners-ropes-textile-white-background-d-illustration-70434974.jpg); 
    background-repeat:no-repeat; 
    background-size:100% auto; 
} 
.divtext { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    padding-top:13.5%; 
    text-align:center; 
    font-weight:bold; 
    font-size:5vw; 
    color:white; 
    font-family:arial; 
} 
@media (min-width: 1200px) { 
    .divtext{ 
    font-size:60px; 
    } 
}

來源

2017-02-02 15:38:53 Niente0

如何在響應圖像上垂直居中文本？

回答

相關問題