CODEWITHSUNDEEP
htmlcss
Alejandra Garcia
Alejandra Garcia

Reputation: 119

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;
    }

Upvotes: 0

Views: 88

Answers (2)

Omri Aharon
Omri Aharon

Reputation: 17064

I had to mess a little bit with the CSS to make it visible on the fiddle, but take a look at this:

Fiddle

Basically, you just need to position both the image and the h1 with absolute in relation to the textto div. Then you can do:

#texto h1 {
    margin:auto;
    line-height:51px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -100%);
    vertical-align:middle;
    color: #FFFFFF;
    font-size: 75px;
}

Upvotes: 0

Ivan Gajic
Ivan Gajic

Reputation: 486

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>

Upvotes: 2

Related Questions