P粉0418569552023-08-24 13:48:16
This is another way to use responsive dimensions. It will keep your text centered and maintain its position in the parent. If you don't want it to be centered, it's even easier, just use the absolute
parameter. Remember that the main container is using display: inline-block
. There are many other ways to achieve this, depending on what you're working with.
Based onUnknown-centered
Here is a working codepen example
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;
}
P粉3492227722023-08-24 09:07:10
How about something like this: http://jsfiddle.net/EgLKV/3/< /p>
Done by positioning the text on the image using position:absolute
and 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>