這是使用響應式尺寸的另一種方法。它將保持您的文本居中并保持其在父級中的位置。如果您不希望它居中,那就更簡單了,只需使用 absolute
參數(shù)即可。請記住,主容器正在使用 display: inline-block
。還有許多其他方法可以實現(xiàn)此目的,具體取決于您正在處理的內(nèi)容。
基于以未知為中心
HTML
<div class="containerBox"> <div class="text-box"> <h4>Your Text is responsive and centered</h4> </div> <img class="img-responsive" src="http://placehold.it/900x100"/> </div>
CSS
.containerBox { position: relative; display: inline-block; } .text-box { position: absolute; height: 100%; text-align: center; width: 100%; } .text-box:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } h4 { display: inline-block; font-size: 20px; /*or whatever you want*/ color: #FFF; } img { display: block; max-width: 100%; height: auto; }
像這樣的怎么樣:http://jsfiddle.net/EgLKV/3/
通過使用 position:absolute
和 z-index
將文本放置在圖像上來完成。
#container { height: 400px; width: 400px; position: relative; } #image { position: absolute; left: 0; top: 0; } #text { z-index: 100; position: absolute; color: white; font-size: 24px; font-weight: bold; left: 150px; top: 350px; }
<div id="container"> <img id="image" src="http://www.noao.edu/image_gallery/images/d4/androa.jpg" /> <p id="text"> Hello World! </p> </div>