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

Question

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 1

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>

Answer 2

You can try to use the framework bootstrap and do like this:
HTML:
<div class="container">
<div class="row text-center">
<div class="col-lg-12">
<img src="http://placehold.it/700x400" class="img-responsive" alt="">
<h1>Text under image</h1>
</div>
</div>
</div>
CSS:
img {
margin: 0 auto;
}

Answer 3

The image CSS:
#sh_start img {
display: block;
padding: 5% 0 100px 0;
width: 40%;
height: auto;
margin: 0 auto;
}
The span CSS:
#sh_start span {
width: 100%;
height: auto;
display: block;
position: relative;
bottom: 20px;
// left: -100%;
left: 0;
color: #fff;
font-family: ReplicaPro-Bold;
font-size: 50px;
opacity: 0.4;
text-align: center;
}
And the container CSS:
#sh_start {
background-color: #EF762F;
}
You can just animate the left property of the span from 100% to 0.
You can see the code in action here: https://jsfiddle.net/7pnrq1xd/1/

Answer 4

I'm not entrirely sure what your restrictions are or if they are restrictions at all but why not just do this to your span:
left:0;
text-align:center
#sh_start {
display:block;
background-color:#EF762F;
position: absolute;
top:0;
left:0;
width:100%;
height: 100%;
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:0;
color:#fff;
font-family:ReplicaPro-Bold;
font-size:50px;
opacity:0.4;
text-align:center;
}
<div id="sh_start">
<img src="test.jpg"></img>
<span>Test</span>
</div>

Answer 5

First Create a DIV Tag where you will place both your image and caption.
<div class="imagewrapper">
<img src="imagehere.jpg">
<p class="imagecaption">Image Caption Here</p>
</div>
Now Code your CSS Something like this.
.imagewrapper {text-align:center}
.imagewrapper img {max-width:100%}
Do not forget to add styling for your image caption class. With above code your image and text will stay in center on any screen size.
Hope that helps.
Regards
Manoj Soni

Answer 6

I have removed the position:absolute declarations, and compacted the CSS code
#sh_start
{
background-color:#EF762F;
width:100%;
height: 100vh;
float:left;
}
#sh_start img, #sh_start span
{
float:left;
width:40%;
height:auto;
margin-top:5%;
margin-left:30%;
text-align:center;
}
#sh_start span
{
color:#fff;
font-family:ReplicaPro-Bold;
font-size:50px;
opacity:0.4;
margin-top:1px;
}
Then in the HTML I have fixed the 'img' closing tag.
<div id="sh_start">
<img src="test.jpg" />
<span>Test</span>
</div>
Live demo: https://jsfiddle.net/j2Lec36d/10/