Positioning text over image (html,css) - html

Question

So, I have an image and I want to display in the center of it some text.
Code:
.img {
position: relative;
}
.img h3 {
position: absolute;
width: 100%
top: 85px;
text-align: center;
}
Ok, so I managed to do it. But here is the thing: when I resize my browser and the image becomes smaller, the text is going out of the image.
So my question is, do I have to use the #media rule for all the different dimensions? And how do I know which dimensions to use in my CSS?
Or is there maybe something I can do so my text element always stays inside the image?
Thank you in advance.

Answer 1

You have a bunch of different options you can make use of, each with its pros & cons and with a difference in browser support:
1. Flexbox: (support)
Flexbox is the simplest option you have, without using tables or having to get your elements out of the document flow, but it's not as widely supported as other viable options. I trust it will be soon enough.
Code:
/* --- CSS --- */
.background {
height: 10em;
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
background-position: center;
}
.background > h4 {
color: #000;
font-size: 2em;
font-family: sans-serif;
}
<!--- HTML --->
<div class = "background" style = "background-image: url(https://images.freecreatives.com/wp-content/uploads/2015/05/HD-Vintage-Photography-Wallpaper.jpg);">
<h4>Hello, world!</h4>
</div>
2. Line-height: (support)
When using this option, you have to ensure that:
the line height of the title is equal to the container's height and
the title is an one-liner.
(view note #2)
Code:
/* --- CSS --- */
.background {
height: 10em;
text-align: center;
background-size: cover;
background-position: center;
}
.background > h4 {
color: #000;
font-size: 2em;
margin: 0 auto;
font-family: sans-serif;
line-height: 5em; /* container height / 2 */
}
<!--- HTML --->
<div class = "background" style = "background-image: url(https://images.freecreatives.com/wp-content/uploads/2015/05/HD-Vintage-Photography-Wallpaper.jpg);">
<h4>Hello, world!</h4>
</div>
3. Position: Absolute & Transform: (support)
This is probably the overall most used method as it is widely enough supported, but it has the disadvantage that gets the element (title) off the normal flow.
Code:
/* --- CSS --- */
.background {
height: 10em;
position: relative;
background-size: cover;
background-position: center;
}
.background > h4 {
top: 50%;
left: 50%;
margin: 0;
color: #000;
font-size: 2em;
position: absolute;
font-family: sans-serif;
transform: translate(-50%, -50%);
}
<!--- HTML --->
<div class = "background" style = "background-image: url(https://images.freecreatives.com/wp-content/uploads/2015/05/HD-Vintage-Photography-Wallpaper.jpg);">
<h4>Hello, world!</h4>
</div>
4. Table (support)
Well, I will likely be lynched, if anybody finds this out, but you can use display: table for the container and display: table-cell for the title to take advantage of the aligning of tables.
You can now center your title:
horizontally, by using text-align: center and
vertically, by using vertical-align: middle
Code:
/* --- CSS --- */
.background {
width: 100%;
height: 10em;
display: table;
background-size: cover;
background-position: center;
}
.background > h4 {
color: #000;
font-size: 2em;
text-align: center;
display: table-cell;
vertical-align: middle;
font-family: sans-serif;
}
<!--- HTML --->
<div class = "background" style = "background-image: url(https://images.freecreatives.com/wp-content/uploads/2015/05/HD-Vintage-Photography-Wallpaper.jpg);">
<h4>Hello, world!</h4>
</div>
Notes:
Since we are using an empty div for our image the height must be explicitly defined at all times.
Using line-height to center an element vertically requires that the line-height is equal to the height of the parent. In this case, 50% of the parent height is used, due to the fact that the font-size of the title is 2x the font-size of the parent and its also expressed in ems.
With regard to the #media query you made mention of, it should not be used for simple stuff like centering text, but rather for showing/hiding elements based on screen size etc.
If you care about the portability of your website to smaller screens, my advice is to avoid using px (pixels), but instead use % (percentages) that will update based on the screen or em (ems) by manually updating the font-size of the container using a #media query.

Answer 2

Use top: 50%;, left: 50%; and transform: translate(-50%, -50%);.
Really common trick these days with excellent browser support. Important to note, you need to specify some sort of height for .img for the inner element to be positioned properly. In this example, I used a vh unit for height to show how responsive it really is. Resize away.
I also prefer to use a background-image for things like this because it makes the markup so much easier. You're either going to want to use background-image or include the <img> tag inside div.img.
.img {
position: relative;
width: 100%;
height: 50vh;
background: #ccc;
background-image: url('https://images.unsplash.com/photo-1474693220100-7cddec4346f6?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=');
background-size: cover;
background-position: 50% 50%;
}
.img h3 {
display: block;
position: absolute;
top: 50%;
left: 50%;
margin: 0 auto;
transform: translate(-50%,-50%);
font-family: sans-serif;
color: white;
font-size: 26px;
}
<div class="img">
<h3>Hello, world!</h3>
</div>

Answer 3

Don't use media query for centering text each time you resize the screen. The solution below will work.
CSS
.container {
position: relative;
}
.center {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
HTML
<div class="container">
<img src="" >
<div class="center">Centered</div>
</div>

Answer 4

/* --- CSS --- */
.background {
height: 10em;
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
background-position: center;
}
.background > h4 {
color: #000;
font-size: 2em;
font-family: sans-serif;
display: none;
}
.background:hover {
display: block;
}
<!--- HTML --->
<div class = "background" style = "background-image: url(https://images.freecreatives.com/wp-content/uploads/2015/05/HD-Vintage-Photography-Wallpaper.jpg);">
<h4>Hello, world!</h4>
</div>