Having difficulty adjusting the text to match the image alignment

Having trouble aligning the text tag inside the H1 above the image. It keeps appearing in the wrong place, either on the left or right. I've tried including the h1 inside the container, but it just disappears.

<!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 №1

Have you attempted something of this nature?

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

Answer №2

I made some adjustments to the CSS code in order to make it visible on the fiddle. Check out the result below:

See Fiddle

To get the desired layout, you should use absolute positioning for both the image and the h1 elements in relation to the textto div. Here's the updated CSS:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having Trouble with Font Awesome Icon Loading in Search Box

Currently, I am working on a website located at . However, I am facing an issue where the font awesome icon is not loading properly and is only displaying a square. I have thoroughly reviewed the CSS and cannot identify any conflicting elements. Any assis ...

Tips on positioning a button at the bottom of the screen in React Native

I am using the FAB component from the react native paper library. I want to align the button at the bottom, but it is overlapping with a text field. How can I position it below the text field? Please refer to the screenshot below: Here is the code snippet ...

Unleash the power of drag-and-drop functionality with cdkDrop

I am currently tackling a project that requires the implementation of a drop zone functionality where elements can be dragged from a list and dropped in a zone for free movement. I intend to utilize a cdkDropList for the zone due to its comprehensive list ...

What could be the reason for the malfunction of my checkbox styling?

I have designed custom checkboxes and radio buttons with CSS styling as shown below: input[type="checkbox"]:checked + label:after, input[type="checkbox"][checked="checked"] + label:after, input[type="radio"][checked="checked"] + label:after, input[type="r ...

JavaScript source control tool

Is there a Java-based version of GitHub? I am interested in developing a dynamic application using HTML5 and Javascript, and had the thought of integrating Git to monitor data changes. Therefore, I am curious if there exists a JavaScript adaptation of a G ...

CSS style for centering double digit list items

My query is: <ul id="list"> <li> <a href=''>1</a> </li> <li> <a href=''>2</a> </li> <li> <a href=''>3</a> </li> <l ...

Click to alter the style of an <li> element

I'm currently using Angular CLI and I have a menu list that I want to customize. Specifically, I want to change the background color of the <li> element when it is clicked. I am passing an id to the changeColor() function, but unfortunately, I a ...

Keep the division visible once the form has been successfully submitted

Initially, I have created 3 divs that are controlled using input type buttons. These buttons serve the purpose of displaying and hiding the hidden divs. Within these divs, there are forms to store data. Currently, my goal is to ensure that the div that was ...

How can I apply a unique CSS class to specific rows within an h:dataTable?

I am looking to apply unique CSS classes to certain rows within my <h:dataTable>. Is it possible to manipulate and style the individual table rows in a customized manner? ...

My Horizontal Drop Down Menu won't stay still, how can I make it stop moving?

I'm a beginner with dropdown menus and I'm struggling to prevent my dropdown menu from expanding and pushing the main buttons. I think it's related to a positioning adjustment, but I can't pinpoint where or what it is. Here is the link ...

Develop a game timer using CreateJS

Looking for advice on the most effective method to create a timer clock using Createjs. I've attempted to reference HTML elements with DOMElement in the past, but encountered difficulties. Essentially, I need to display a timer within a container so p ...

Moving pictures using css3 transitions

Trying to create a straightforward image slider. Below is the provided JavaScript code: $(document).ready(function() { $('#slide1_images').on('click', 'img', function(){ $("#slide1_images").css("transform","translateX ...

Using JQuery with special characters in attributes

Within my jQuery script, I am required to dynamically translate certain content. As a part of this function, I have the following code: $('#password').attr('placeholder', 'Contrase&ntilde;a'); In this code snippet, I att ...

Does CSS positioning change depending on the screen size?

I need help fixing the positioning of my logo on the screen. I want it to be 40px from the top and centered horizontally regardless of the screen size. Here is the code that I have: <html> <head> <style type="text/css> body{ back ...

Understanding the appropriate roles and attributes in HTML for a modal backdrop element in a TypeScript React project

Trying to create a Modal component using React and TypeScript with a feature that allows closing by clicking outside. This is being achieved by adding a backdrop element, a greyed out HTML div with an onClick event calling the onClose method. Encountering ...

Beginning of my initial endeavor (seeking feedback, general advice, criticism)

Hey everyone! I'm looking for a forum-style platform similar to Stack Overflow where I can get some feedback on my first project. It's the first one I've built from scratch, so I'm open to any critiques or suggestions on what could be i ...

To emphasize code in an HTML document, you can use the <font color="#xxx"> tag

Can anyone guide me on how to add color highlights to my HTML code in this way? <font color="#1773cc">#include </font><font color="#4a6f8b">&lt;NTL/ZZ.h&gt;</font><br> <br> <font color=&quo ...

Having issues with the background-image style not displaying correctly in the header of an

Trying to update the "background-image:" of a CSS class upon button click. JQuery: $(function() { $('button').on('click', function() { $('.masthead2').css('background-image', 'url("../img/whitehead ...

Local cross-origin requestsORCross-origin requests within local

I'm having an issue with a simple setup that I can't seem to figure out: This is my index.html file: <!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>SyriLab</title> <link rel="stylesheet" ...

Displaying a variable in a live HTML user interface

I have successfully created a Python program that captures data from an Arduino Potentiometer and shows it on the Python console. Now, I am working on enhancing the output by displaying it in a local HTML file. I am seeking guidance on how to incorporate t ...