azmd108 azmd108 - 5 months ago 12
CSS Question

CSS/HTML place text under image, doesnt matter which viewport/res

i want to center a image and place some text under it.

The picture should be everytime in the middle of the screen, doesnt matter how i scale the viewport. Also the text has to be under the picture everytime.

The Backgroundcolor has to be

#EF762F


It worked for me on one screen with this
https://jsfiddle.net/j2Lec36d/ , but if i watch it on another screen, with other resolution, the text is not centered under the image anymore.

Also the span has to be positioned absolute left with -100%, jQuery slides it then to 50%

HTML:

<div id="sh_start">
<img src="test.jpg"></img>
<span>Test</span>
</div>


CSS:

body, html { font-family: arial; font-size: 12px; margin:0; padding:0; width: 100%; height: 100%; background-color:#fff;overflow:hidden;}

#sh_start img {display: block;padding:5% 0 0 30%;width: 40%; height: auto; position:absolute; top:5%;left:0; right:0; bottom:0;}

#sh_start span {width: 100%; height: auto;display:block;position:absolute;top:58%;left:50%; color:#fff; font-family:ReplicaPro-Bold;font-size:50px;opacity:0.4;}

#sh_start {display:block;background-color:#EF762F;position: absolute; top:0;left:0;width:100%; height: 100%; overflow:hidden;}

Answer

You can do this quite simple using flexbox:

$(document).ready(function(){
  
  $( "#sh_start span" ).animate({
    left: "50%",
    left: "toggle"
  }, 5000, function() {
    // Animation complete.
  });
})
#sh_start img {display: block;width: 40%; height: auto; }
#sh_start span{width: 100%; height: auto;display:block; color:#fff; font-family:ReplicaPro-Bold;font-size:50px;opacity:0.4;
position: relative; left: 100%;
}
#sh_start {display:block;background-color:#EF762F;position: absolute; top:0;left:0;width:100%; height: 100%; overflow:hidden;display:flex;align-items: center; justify-content: center;flex-direction: column;text-align: center;}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div id="sh_start">
       <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQNjQ76c71y3CL0xrOhpl3wf3W5X3Mi3ddv1SUH3UbkPBz3SWPAuw">
       <span>Test</span>
   </div>