Alejandra Garcia Alejandra Garcia - 7 months ago 9
HTML Question

Unable to properly align the text above the image

I'm unable to properly align the text tag inside the H1 above the image, everytime is out of the place where I want to. Sometimes it's in the left or right i tried to include the h1 inside the container but he just disappear.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="20; url=011.html" />

<title>title</title>
</head>
<body>

<div class="shadow"<a target="none" href="paris.jpg">
<div id="texto"><h1>Yes</h1></div>
<img src="010.jpg" class="logo">
</div>
<video id="bgvideo" autoplay loop>
<source src="club01.mp4" type="video/mp4">
<source src="movie.ogg" type="video/webm">
Your browser does not support the video tag.
</video>

</body>
</html>


CSS

#texto {
top:198px;
left:365px;
width:62px;
height:51px;
color:white;
position:absolute;
text-align:center;
background-color:black;
}

#texto h1 {
margin:auto;
line-height:51px;
vertical-align:middle;
color: #FFFFFF;
font-size: 75px;
}

div.shadow {
position:absolute;
max-width:90%;
max-height:90%;
top:50%;
left:50%;
overflow:visible;
}
img.logo {
position:relative;
max-width:90%;
max-height:90%;
margin-top:-60%;
margin-left:-50%;
border-radius: 5%;
}

video#bgvideo{
min-width:100%;
min-height:100%;
width:auto;
height:auto;
background-size:cover;
}

Answer

Have you tried something like this?

<html>
    <head>
    <style>
        #texto {
            width:100%;
            height:51px;
            color:white;
            text-align:center;
        }

        #texto h1 {
            width: 60px;
            display: block;
            margin: 0 auto;
            line-height:51px;
            vertical-align:middle;
            color: #FFFFFF;
            text-align:center;
            background-color:black;
            font-size: 30px;
        }

        div.shadow {
            max-width:90%;
            text-align: center;
            max-height:90%;
            overflow:visible;
        }
        img.logo {

            max-width:90%;
            max-height:90%;       
            border-radius: 5%;
        }
        video#bgvideo{
            min-width:100%;
            min-height:100%;
            width:auto;
            height:auto;
            background-size:cover;
        }
    </style>
    </head>
    <body>
    <div class="shadow">
            <a target="none" href="">
            <div id="texto"><h1>Yes</h1></div></a>
            <img src="http://vignette2.wikia.nocookie.net/teenbeachmovie/images/b/bf/Sad-face.jpg"  class="logo">
        </div>
        <video id="bgvideo" autoplay loop>
            <source src="club01.mp4" type="video/mp4">
            <source src="movie.ogg" type="video/webm">
            Your browser does not support the video tag.
        </video>
    </body>
</html>