I can't seem to figure out why my container is not centered on the screen, despite setting the margins (left and right) to auto

Hey there, I'm a beginner in programming and currently experimenting with the CSS vertical text slide animator feature. However, when the animation runs smoothly, I noticed that the text appears disproportionate and not properly centered on the screen, despite setting margins (right & left) to auto.

@keyframes animate{
  0%,100%{
    top:0;
  }
  20%{
    top:0px;
  }  
  25%{
    top:-50px;
  }
  45%{
    top:-50px;
  }
  50%{
    top:-100px;
  }
  70%{
    top:-100px;
  }
  75%{
    top:-150px;
  }
  95%{
    top:-150px;
  }
}
<div class="container " style="margin-left: auto; margin-right:auto">
      <h1 class="display-4 w3-center w3-animate-right" >Hi I'm Raffiel</h1>
      <div class="outer " style="display: block; position:relative;">
        <h1 style="font-size: 45px ;">I am, &nbsp;
        <div class="inner" style="position:absolute; border:0px solid #ddd; height:50px; line-height:50px; font-size:45px; text-transform:uppercase; overflow:hidden; display:inline-block; text-align: left;  font-weight: 400;">
          <span style="animation:animate 10s ease infinite; position:relative;color:#e58e26; text-align: left;">
            Graphic Designer<br>
            Digital Marketer<br>
            Video Editor<br>
            Web Designer<br>
          </span>
        </div>
          </h1>
      </div>
    </div>

This is strong text!

htmlcss

Answer №1

Essentially, the inclusion of position:relative was necessary for the element to occupy "space" and be centered using text-align:center. However, further adjustments are still required for this example to be perfect.

@keyframes animate {
  0%,
  100% {
    top: 0;
  }
  20% {
    top: 0px;
  }
  25% {
    top: -50px;
  }
  45% {
    top: -50px;
  }
  50% {
    top: -100px;
  }
  70% {
    top: -100px;
  }
  75% {
    top: -150px;
  }
  95% {
    top: -150px;
  }
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d3b1bcbca7a0a7a1b2a393e6fde1fde3">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

<div class="container" style="text-align:center">
  <h1 class="display-4 w3-center w3-animate-right">Hello, I'm Raffiel</h1>
  <div class="outer">
    <h1 style="font-size: 45px ;height:50px; line-height:50px ">I am,
      <div class="inner" style="position:relative; border:0px solid #ddd; height:45px; line-height 45px; font-size:45px; text-transform:uppercase; overflow:hidden; display:inline-block; text-align: left;  font-weight: 400; ">
        <span style="animation:animate 10s ease infinite; position:relative;color:#e58e26; ">
            Graphic Designer<br>
            Digital Marketer<br>
            Video Editor<br>
            Web Designer<br>
          </span>
      </div>
    </h1>
  </div>
</div>

Answer №2

give this a shot

@keyframes animate{
  0%,100%{
    top:0;
  }
  20%{
    top:0px;
  }  
  25%{
    top:-50px;
  }
  45%{
    top:-50px;
  }
  50%{
    top:-100px;
  }
  70%{
    top:-100px;
  }
  75%{
    top:-150px;
  }
  95%{
    top:-150px;
  }
}
<div class="container " style=" width:100%; margin: auto;">
      <h1 class="display-4 w3-center w3-animate-right" style="text-align:center;" >Hey I'm Raffiel</h1>
      <div class="outer " style="display: block; text-align:center;">
        <h1 style="font-size: 45px;">I am,
        <div class="inner" style=" border:0px solid #ddd; height:50px; line-height:50px; font-size:45px; text-transform:uppercase; overflow:hidden; display:inline-block;  text-align:left; font-weight: 400;">
          <span style="animation:animate 10s ease infinite; position:relative;color:#e58e26; ">
            Artist<br>
            Musician<br>
            Photographer<br>
            Writer<br>
          </span>
        </div>
          </h1>
      </div>
    </div>

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

Is there a way to automatically redirect the main html page to a different html page upon logging in?

I have created a main page in HTML with a login box that displays a message saying "Login successful" or "Login failed" based on whether the password entered is 8 characters or more. The validation function for this works correctly, but after successfully ...

javascripthtml

Can a layer be sliced to create a text-shaped cutout?

I want to achieve a cool text effect where the background is visible through the letters. I have explored options with background images and colors, but I haven't found any examples where the underlying layer is revealed. Is this even possible? Imag ...

javascriptjquerycsshtml

Can CSS be used to consistently position content in a specific manner?

I previously inquired about a similar issue and received an excellent solution. Here is my jsbin http://jsbin.com/nuwagibayo/1/edit?html,css,output where I encountered the following scenario: The positioning of 12.50 seems slightly awkward in its current ...

css

Troubles with modal functionality in Ionic application involving ion-slide-box

Utilizing ion-slider to display images has been a seamless experience, except for one hiccup. If I navigate directly from the first full image back to the home screen, the slider ceases to function properly. To address this challenge, I have employed spec ...

htmlangularjscordovaionic-framework

How to access a variable from within a Phonegap DB function and return it outside of the

I'm struggling with a phonegap db JavaScript script that isn't returning the final string variable "feeds" outside the function. It's currently showing as "undefined". I need help making the necessary changes to properly return the "feeds" v ...

javascriptjqueryhtmlsqlitecordova

Adjust the width of a DIV based on the content of other DIVs, and float and center them all

Initially, what seemed like a simple task has turned out to be more complicated than I anticipated. Here is my code: <html> <head> <style> div { border-top: 1px solid black; margin: 10px; } div#all { border: 0; } </style> <body ...

htmlwidthcss

Animation of two divs stacked on top of each other

I am trying to replicate the animation seen on this website . I have two divs stacked on top of each other and I've written the following jQuery code: $('div.unternehmen-ahover').hover( function () { $('div.unternehmen-ahover' ...

javascriptjquerycsshtmlslider

HTMLElement addition assignment failing due to whitespace issues

My current challenge involves adding letters to a HTMLElement one by one, but I'm noticing that whitespace disappears in the process. Here's an example: let s = "f o o b a r"; let e = document.createElement('span'); for (let i ...

javascripthtmltypescript

Anime.js: Grid layout causing issues with displaying simple text animations

I'm attempting to create a text animation within a grid layout using the anime.js library, but unfortunately, the animation isn't displaying. The project consists of just one HTML file. The JavaScript code: <script> import anime from &ap ...

javascripthtmlcssanime.js

Contact Form Appears to Be Functioning Properly, Yet Emails Are Not Being Received (HTML5 & PHP)

Hello everyone, I need some assistance with creating a contact form. This is my first time working on this, and I am facing an issue. I am using HTML5, which I have some knowledge of, and PHP, which I am not very familiar with. When I try to test the form ...

phphtmlforms

Leverage CSS variables within the `url('data:image/svg+xml')` function

Here is a CSS snippet I use to create a dashed border around a div: div { width: 100px; height: 100px; border-radius: 16px; background-image: url('data:image/svg+xml,%3csvg stroke="black" width="100%25" height="100%25" xmlns="http://www.w ...

csssvgcss-variables

Library written in JavaScript for extracting CSS that is relevant

Is there a JavaScript tool available that can extract the style information from HTML code? For instance, when given the following HTML snippet, it would output a style block containing all the computed styles applied to each of those elements? Input... ...

javascriptcssnpmjquery-plugins

CSS animation for input range slider

Is there a way to create smoother animations for the input[type="range"] element, especially when dealing with short audio files? You can check out my Codepen where I've been experimenting with solutions using a short audio file: Codepen Link I am s ...

csshtmlcss-animations

Combining onClick and a href within a single sentence: How can I effectively utilize both onClick

Currently, I have implemented the following code for a sliding menu bar. However, I am facing an issue where upon clicking on a href link, I want the ".gs-hamburger" function to slide up the menu bar after redirecting to the page. <nav class="gs-nav- ...

jqueryhtml

Avoid changing the button color to a lighter shade when it is clicked

Is there a way to prevent button text from changing to a lighter color after clicking? I am facing an issue where the button I set to red turns slightly whiteish after it is clicked. How can I ensure that the button stays red at all times? Header Toolbar ...

htmlcssangularionic-frameworkionic5

The structure of the figure tag for HTML5 validation

Could you please confirm if the Figure tag is correctly used in the html structure? Regarding html5 validation, can I use this structure? <a href="#"> <figure> <img src="" class="img-responsive" alt=""> <figcaption> ...

csshtml

Utilize Bootstrap-Vue to ensure that an element expands to occupy the available space

In my Bootstrap-Vue application, I have set up the following hierarchy: <b-navbar.../> <b-container > <b-row align-v="center" style="min-height:100vh"> <b-col style="align-items:center"> <h1>404 Error&l ...

htmlcsstwitter-bootstrapvue.jsvuejs2

Unusual Conduct when Interacting with ContentEditable Text

Looking for help with a strange issue that I can't seem to figure out. Hopefully someone has encountered this before and might have a solution. In my Angular app, I'm using a contenteditable <div> for inputting content, which is working fi ...

htmlmysqlangularcontenteditable

Attempting to transmit a pair of parameters from an HTML form through Flask (within a URL) in order to subsequently execute in a Python script

As a newcomer, I am working on a Python algorithm that requires two parameters obtained from an HTML form. Here is the snippet of my HTML code: <form action="result/"> <p><input class="w3-input w3-padding-16" method ...

pythonhtmlflaskget

How can we use jQuery to extract an HTML element's external stylesheet and add it to its "style" attribute?

My goal is to extract all CSS references from an external stylesheet, such as <link rel="stylesheet" href="css/General.css">, and add them to the existing styling of each HTML element on my page (converting all CSS to inline). The reason for this re ...

javascriptjqueryhtmlcss