How to center text (responsive) in image using css/html

Question

Is there any way to make responsive text inside an image? I would like to do it without using media queries. I already tried this Horizontal centering text over image via CSS but it does not work.

The problem (pic. down) is when reaching small screen values, the text goes outside the image and it does not resize it. With media queries I could do it just by changing the size of the text, but is not any other way to do it?

HTML code:

<div class="wrapper-pig">
     <center><img src="http://s24.postimg.org/4axzhhujp/schwein.png" style="width: 70%; height=auto;"/></center>
      <div class="pig-text" >
           <span style="color:white;" >9563</span>
       </div>

</div>

CSS code:

.wrapper-pig{
   width: 100%;
   background-color: yellow;
   position: relative;
   box-sizing: border-box;

}

.pig-text{
    font-size: 160%;
    position: absolute;
    display: inline-block;
    left: 40%;
    top: 40%;
}

Please, any help?

I prepared a fiddle to show the problem better: My fiddle

`` is deprecated since the medieval ages. – connexo Sep 04 '15 at 07:26 — connexo, Sep 04 '15 at 07:26
So you also want the text to shrink? – chrona Sep 04 '15 at 07:28 — chrona, Sep 04 '15 at 07:28
Yes, it should shrink as well – karlihnos Sep 04 '15 at 07:30 — karlihnos, Sep 04 '15 at 07:30

score 3 · Answer 1 · answered Sep 04 '15 at 07:26

3

You can make this to center perfectly:

.pig-text{
  font-size: 160%;
  position: absolute;
  display: inline-block;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

answered Sep 04 '15 at 07:26

Marcos Pérez Gude

21,869
4
38
69

Here, the text doesn't shrink. – rst Sep 04 '15 at 07:30
Thx, this is part of my solution :) – karlihnos Sep 04 '15 at 07:39

score 2 · Answer 2 · edited May 23 '17 at 10:28

2

I recommend to use a responsive font size, check out this here

https://jsfiddle.net/f11y74ms/

The hint comes from

Responsive font size according to window width, is it possible with CSS?

The commands are vh, vw, vmin, so the smallest viewpoint is taken as a reference.

edited May 23 '17 at 10:28

Community

1
1

answered Sep 04 '15 at 07:30

rst

2,510
4
21
47

Thx, this helps me. My final solution is a combination of your answer and from @Marcos Perez – karlihnos Sep 04 '15 at 07:39

score 0 · Answer 3 · answered Sep 04 '15 at 07:37

You can try what RobertStettler has said.

You can use viewport value instead of ems, pxs or pts.

1vw = 1% of viewport width

1vh = 1% of viewport height

1vmin = 1vw or 1vh, whichever is smaller

1vmax = 1vw or 1vh, whichever is larger

.schwein-text{
    font-size: 4vw;
    position: absolute;
    display: inline-block;
    left: 40%;
    top: 40%;
}

Working Demo here

How to center text (responsive) in image using css/html

3 Answers3