如何在响应图像上垂直居中文本？

如何在浏览器窗口重新调整大小时，让这些图像上的标题文字四处移动？我的实现很快捷，我需要一种方法来保持文本在窗口大小调整时不会滑动。如何在响应图像上垂直居中文本？

<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

如何在响应图像上垂直居中文本？

回答

相关问题