问题
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.
回答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 theheight
must be explicitly defined at all times. - Using
line-height
to center an element vertically requires that theline-height
is equal to the height of the parent. In this case,50%
of the parent height is used, due to the fact that thefont-size
of the title is2x
thefont-size
of the parent and its also expressed inems
. - 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 orem
(ems) by manually updating thefont-size
of the container using a@media
query.
回答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>
回答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>
来源:https://stackoverflow.com/questions/42450098/positioning-text-over-image-html-css