The margin 0 auto feature is ineffective, and instead, the target is activated upon the page's initial loading

Question

The margin 0 auto feature is ineffective, and instead, the target is activated upon the page's initial loading

As a beginner in CSS, I am encountering some issues with the HTML page of my application. I am currently working on an app and aiming to create a login view where the login form appears either after a voice command or button click. I am facing two main problems - first, I am unable to center my form (although it works fine on jsbin), and secondly, my target event (animation) is running after the page is ready rather than after a link click.

    #przejscie
{
    width: 340px;
    display: block;
    opacity: 0;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    top: 500px;

 transition: transform 20s, background 50s;
 -o-transition: -o-transform 16s, background 0.5s;
 -moz-transition: -moz-transform 0.5s, background 0.5s;
 -webkit-transition: -webkit-transform 3s, opacity 2s, background 0.5s;
}
#przejscie:target
{
 transform: translate(-200);
 -o-transform: scale(1.2);
 -moz-transform: scale(1.2);
 -webkit-transform: translate(0px,-300px );

  opacity: 1;
}

This is my current CSS code for the form:

    <html>
<head>
     <script src="{% static 'js/artyom.min.js' %}"></script>
     <script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="{% static 'css/animacje.css' %}"/>
</head>

<h1><a href="#przejscie">Welcome register in our application</a></h1>

<div id="przejscie" class="container col-sm-3 srodek col-md-offset-2">

            <form method="post" action="/PPProject-web/register" class="form-signin">

                <label for="email" class="sr-only">Email Address</label>
                <input name="email" class="form-control" id="email" type="email" placeholder="Email" required>

                <label for="name" class="sr-only">Name</label>
                <input name="name" class="form-control" id="name"  placeholder="Name" required>

                <label for="surname" class="sr-only">Surname</label>
                <input name="surname" class="form-control" id="surname"  placeholder="Surname" required>

                <label for="username" class="sr-only">Username</label>
                <input name="username" class="form-control" id="username" placeholder="Username" required>

                <label for="password" class="sr-only">Password</label>
                <input name="password" type="password" class="form-control" id="password" placeholder="Password" required>

                <button class="btn btn-lg btn-primary btn-block" type="submit">Register</button>

            </form>
        </div>

</html>

Although the target function is working properly, I still need assistance in centering this div element.

html css

Answer 1

Answer №1

When using absolute positioning, the automatic margin (margin: 0 auto) does not apply to the space being focused on. In such cases, it is recommended to change the position from "absolute" to "relative".

If you still need to utilize absolute positioning, consider implementing the following code:

#przejscie{
    display: block;
    max-width: 100%;
    width:400px;
    margin:0 auto;
    position: relative;
    background:salmon;
}

  
  #przejscie2{
    width:400px;
    position:relative;
    background:red;
}



  .cont-form{
    width:100%;
    height:auto;
    display: flex;
    justify-content: center;
    background:yellow;

  }

<div id="przejscie" class="container col-sm-3 srodek col-md-offset-2">
            <form method="post" action="/PPProject-web/register" class="form-signin">
                <label for="email" class="sr-only">Email Address</label>
                <input name="email" class="form-control" id="email" type="email" placeholder="Email" required>

                <label for="imie" class="sr-only">First Name</label>
                <input name="name" class="form-control" id="name"  placeholder="Name" required>

                <label for="nazwisko" class="sr-only">Last Name</label>
                <input name="last_name" class="form-control" id="last_name"  placeholder="Last Name" required>

                <label for="username" class="sr-only">Username</label>
                <input name="username" class="form-control" id="username" placeholder="Username" required>

                <label for="password" class="sr-only">Password</label>
                <input name="password" type="password" class="form-control" id="password" placeholder="Password" required>

                <button class="btn btn-lg btn-primary btn-block" type="submit">Register</button>

            </form>
        </div>


<br><br>

<div class="cont-form">
<div id="przejscie2" class="container col-sm-3 srodek col-md-offset-2">
            <form method="post" action="/PPProject-web/register" class="form-signin">
                <label for="email" class="sr-only">Email Address</label>
                <input name="email" class="form-control" id="email" type="email" placeholder="Email" required>

                <label for="imie" class="sr-only">First Name</label>
                <input name="name" class="form-control" id="name"  placeholder="Name" required>

                <label for="nazwisko" class="sr-only">Last Name</label>
                <input name="last_name" class="form-control" id="last_name"  placeholder="Last Name" required>

                <label for="username" class="sr-only">Username</label>
                <input name="username" class="form-control" id="username" placeholder="Username" required>

                <label for="password" class="sr-only">Password</label>
                <input name="password" type="password" class="form-control" id="password" placeholder="Password" required>

                <button class="btn btn-lg btn-primary btn-block" type="submit">Register</button>

            </form>
        </div>
</div>

Answer 2

When using absolute positioning, the automatic margin (margin: 0 auto) does not apply to the space being focused on. In such cases, it is recommended to change the position from "absolute" to "relative".

If you still need to utilize absolute positioning, consider implementing the following code:

#przejscie{
    display: block;
    max-width: 100%;
    width:400px;
    margin:0 auto;
    position: relative;
    background:salmon;
}

  
  #przejscie2{
    width:400px;
    position:relative;
    background:red;
}



  .cont-form{
    width:100%;
    height:auto;
    display: flex;
    justify-content: center;
    background:yellow;

  }

<div id="przejscie" class="container col-sm-3 srodek col-md-offset-2">
            <form method="post" action="/PPProject-web/register" class="form-signin">
                <label for="email" class="sr-only">Email Address</label>
                <input name="email" class="form-control" id="email" type="email" placeholder="Email" required>

                <label for="imie" class="sr-only">First Name</label>
                <input name="name" class="form-control" id="name"  placeholder="Name" required>

                <label for="nazwisko" class="sr-only">Last Name</label>
                <input name="last_name" class="form-control" id="last_name"  placeholder="Last Name" required>

                <label for="username" class="sr-only">Username</label>
                <input name="username" class="form-control" id="username" placeholder="Username" required>

                <label for="password" class="sr-only">Password</label>
                <input name="password" type="password" class="form-control" id="password" placeholder="Password" required>

                <button class="btn btn-lg btn-primary btn-block" type="submit">Register</button>

            </form>
        </div>


<br><br>

<div class="cont-form">
<div id="przejscie2" class="container col-sm-3 srodek col-md-offset-2">
            <form method="post" action="/PPProject-web/register" class="form-signin">
                <label for="email" class="sr-only">Email Address</label>
                <input name="email" class="form-control" id="email" type="email" placeholder="Email" required>

                <label for="imie" class="sr-only">First Name</label>
                <input name="name" class="form-control" id="name"  placeholder="Name" required>

                <label for="nazwisko" class="sr-only">Last Name</label>
                <input name="last_name" class="form-control" id="last_name"  placeholder="Last Name" required>

                <label for="username" class="sr-only">Username</label>
                <input name="username" class="form-control" id="username" placeholder="Username" required>

                <label for="password" class="sr-only">Password</label>
                <input name="password" type="password" class="form-control" id="password" placeholder="Password" required>

                <button class="btn btn-lg btn-primary btn-block" type="submit">Register</button>

            </form>
        </div>
</div>

Answer 3

Answer №2

~~It seems like your document is missing a crucial <body> tag.~~

Edit: After some review, it looks like the issue may be related to absolute positioning and the form taking up 100% of the width.

When using margin: auto, the element's width, padding, and borders are considered to calculate margin on both sides equally. If the form takes up the entire body width, there won't be any margin present.

Absolute positioning removes the element from the flow, causing it to ignore other elements. This could explain why the browser treats the margin as zero in this situation.

Consider trying position:relative instead or setting all position properties to zero for horizontal and vertical centering. You can find more information in this answer: css absolute position won't work with margin-left:auto margin-right: auto.

I experimented by adding position: relative and width:50% to #przejscie, which seemed to resolve the issue.

For further insights, check out: https://developer.mozilla.org/en-US/docs/Web/CSS/position#Absolute_positioning

Answer 4

~~It seems like your document is missing a crucial <body> tag.~~

Edit: After some review, it looks like the issue may be related to absolute positioning and the form taking up 100% of the width.

When using margin: auto, the element's width, padding, and borders are considered to calculate margin on both sides equally. If the form takes up the entire body width, there won't be any margin present.

Absolute positioning removes the element from the flow, causing it to ignore other elements. This could explain why the browser treats the margin as zero in this situation.

Consider trying position:relative instead or setting all position properties to zero for horizontal and vertical centering. You can find more information in this answer: css absolute position won't work with margin-left:auto margin-right: auto.

I experimented by adding position: relative and width:50% to #przejscie, which seemed to resolve the issue.

For further insights, check out: https://developer.mozilla.org/en-US/docs/Web/CSS/position#Absolute_positioning

Answer 5

Answer №3

It is essential to specify the width of the element you want to center

Answer 6

It is essential to specify the width of the element you want to center

The margin 0 auto feature is ineffective, and instead, the target is activated upon the page's initial loading

Answer №1

Answer №2

Answer №3

Similar questions

Mobile display trapping Bootstrap navbar

Creating PNG images in a scripting language for web applications

What is the best way to position the header at the top and the footer at the bottom of the page, with the main content in between using

Tracking progress with a dynamic bar from the beginning to the end

Troubleshooting Issue with Importing File into CSS Document

Using static typing in Visual Studio for Angular HTML

Can anyone suggest a stellar sprite generator for me?

Utilizing Nginx with Angular2 for a seamless PathLocationStrategy implementation in html5

<container> rectangular form

Dynamic sidebar that adheres to the content and is placed alongside it using JavaScript

Invoke a function to retrieve HTML content from a controller method

Issue with Modal Box: Datepicker not Displaying Correctly

Tips on activating the overlay solely on the image without affecting the entire column

Tips for customizing the appearance of a functional stateless component in Reactjs using class objects

Firefox does not allow contenteditable elements to be edited if they are nested inside a parent element that is draggable

Issues with jQuery animate not functioning properly when triggered on scroll position

Expand Navigation Bar upon Hover

Utilizing Angular 2 for dynamic CSS binding: manipulating style.width and style.height properties

What is the best way to generate two <div> elements, with one of them being centrally fixed?

There is a gap found in the span element in Angular, but this gap is not seen in