Voici une autre fa?on d’utiliser les dimensions réactives. Il gardera votre texte centré et maintiendra sa position dans le parent. Si vous ne souhaitez pas qu'il soit centré, c'est encore plus simple, utilisez simplement absolute
參數(shù)即可。請(qǐng)記住,主容器正在使用 display: inline-block
. Il existe de nombreuses autres fa?ons d'y parvenir, en fonction de ce avec quoi vous travaillez.
Basé sur centré sur l'inconnu
Voici un exemple de codepen fonctionnel
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; }
Que diriez-vous de quelque chose comme ?a?: http://jsfiddle.net/EgLKV/3/
Fait en pla?ant du texte sur l'image en utilisant 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>