將H2跨度垂直對齊到DIV的中心
[英]Vertically Aligning H2 Span to centre of DIV
問題描述
我正在嘗試沿DIV的中間垂直對齊顯示“我的標題”的h2跨度。
我嘗試使用vertical - align但是該屬性沒有改變照片的位置。
我正在使用引導程序，問題是隨着頁面窗口變小，由於相對位置目前僅最有效，因此文本消失了。
.imageInside { position: relative; width: 100%; /* for IE 6 */ } h2 { line-height:100px; vertical-align:middle; position: absolute; top: 0; left: 10; width: 100%; } h2 { z-index:1; } h2 span { color: white; font: bold 0.8em 'montserratsemi_bold', Helvetica, Sans-Serif; letter-spacing: -1px; background: rgb(0, 0, 0); /* fallback color */ background: rgba(0, 0, 0, 0.7); padding: 10px; }
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <!DOCTYPE html> <head> <title>Tutorial</title> <!-- Tab Title --> <link rel="stylesheet" type="text/css" href="bootstrap.min.css"> <!-- 960 Grid --> <style> .imageInside { position: relative; width: 100%; /* for IE 6 */ } h2 { line-height:100px; vertical-align:middle; position: absolute; top: 0; left: 10; width: 100%; } h2 { z-index:1; } h2 span { color: white; font: bold 0.8em 'montserratsemi_bold', Helvetica, Sans-Serif; letter-spacing: -1px; background: rgb(0, 0, 0); /* fallback color */ background: rgba(0, 0, 0, 0.7); padding: 10px; } </style> </head> <body> <div class="container"> <div class = "row"> <div class="imageHolder col-md-12 middle" style="margin-top:10px;"> <div class = "imageInside hvr-underline-from-center" > <img id = "imageHomeJPG" src="http://bit.ly/1lhHK4t" style="width:100%" /> <h2><span>My Caption.</span></h2> </div> </div> </div> </div> </div> </body> </html>
請全屏查看代碼段，以查看真實結果。
我使用了以下教程。 https://css-tricks.com/text-blocks-over-image/
謝謝大衛。
1 個解決方案
解決方案1
0 已采納 2015-12-05 11:03:41
這就是您想要的： http : //codepen.io/anon/pen/yeLjVX
訣竅來自變換屬性！
h2 {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
將 div 轉換為 h2 跨度 jQuery
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.