center the form vertically, similar to how you would with text

I am struggling to vertically align my form on my website. Can someone assist me with this issue?

I want my form to be vertically aligned in the same way as my text on the website. How can I achieve this?

Here is the code snippet I am currently using: http://pastebin.com/FuCNwM6e

<head>
<!DOCTYPE html>
<html>
<head>
<title>2 Column CSS Layout</title>
<style type="text/css">
body {
    margin:20px;
    font-family:"Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif;
    background-color:#555
}

div {
    text-align:center
}

#page {
    background-color:#fff;
    margin:0 auto;
    text-align:left;
    width:755px;
    padding:0 10px
}

#header {
    border-bottom:0px solid #000;
    height:30px;
    line-height:30px
}

/* Begin Navigation Bar Styling */
#nav {
    text-align:center;
    line-height: 30px;
}

#nav ul {
    text-align:center;
    font-size:11px;
    width:100%;
    margin:0;
    padding:0;
    display:inline-block;
    list-style:none;
    background-color:#f2f2f2;
    border-bottom:1px solid #ccc;
    border-top:1px solid #ccc
}

#nav li {
    margin:auto;
    display:inline-block
}

#nav li a {
    display:block;
    padding:8px 15px;
    text-decoration:none;
    font-weight:700;
    color:#069;
    border-right:1px solid #ccc
}

#nav li a:hover {
    color:#c00;
    background-color:#fff
}

/* End navigation bar styling. */

#content {
    height: 200px;
    width:100%;
    display: table;
    background:none repeat scroll 0 0 none;
}

#content p {
  display: table-cell;
  vertical-align: middle;
}

#footer {
    height:30px;
    line-height:30px;
    border-top: 1px solid #000;
    font-size:9pt
}

#footer p {
float: right;
}

.clear {
    clear: both;
}



</style>
</head>

<body>
    <div id="page">
        <div id="header">
            <div style="float: left;">
Please Login
            </div>
        </div>


        <div id="content">
<p>
<form action="" method="post">    
<label for="un">Username</label>
  <input type="text" id="un" placeholder="username" /><br/>
    <label for="pw">Password</label>
  <input type="password" id="pw" placeholder="password" /><br/>
  <input type="submit" value="Login"/>
</form>
</p>  
        </div>

        <div id="footer">
<div style="float: right;"> copyright 2014 </div>
        </div>
    </div>
</body>
</html>

Answer №1

To modify your CSS, include the following changes with a 500px height for better visualization:

body {
    margin:20px;
    font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
    background-color:#555;
    height:100%;
}
div {
    text-align:center
}
#page {
    background-color:#fff;
    margin:0 auto;
    text-align:left;
    width:755px;
    padding:0 10px;
}
#header {
    border-bottom:0px solid #000;
    height:30px;
    line-height:30px
}
/* Navigation Bar Styling */
#nav {
    text-align:center;
    line-height: 30px;
}
#nav ul {
    text-align:center;
    font-size:11px;
    width:100%;
    margin:0;
    padding:0;
    display:inline-block;
    list-style:none;
    background-color:#f2f2f2;
    border-bottom:1px solid #ccc;
    border-top:1px solid #ccc
}
#nav li {
    margin:auto;
    display:inline-block
}
#nav li a {
    display:block;
    padding:8px 15px;
    text-decoration:none;
    font-weight:700;
    color:#069;
    border-right:1px solid #ccc
}
#nav li a:hover {
    color:#c00;
    background-color:#fff
}
/* End navigation bar styling */
#content {
    height: 500px;
    width:100%;
    background:none repeat scroll 0 0 none;
    display:flex;
    align-items:center;
}
#content p {
    display: table-cell;
    vertical-align: middle;
}
#footer {
    height:30px;
    line-height:30px;
    border-top: 1px solid #000;
    font-size:9pt
}
#content:before {
    content:'';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
    /* Adjusts for spacing */
}
#footer p {
    float: right;
}
.clear {
    clear: both;
}
form {
    margin:0 auto;
    width: 300px;
    padding: 10px 15px;
    border: #a0a0a0 solid 1px;
    background: #f5f5f5;
}

View the modified CSS here

The flex display allows for alignment of elements in various ways, ensuring responsiveness for both fixed and flexible designs.

Answer №2

If you want to achieve this, follow these steps:

First, enclose your <form> within a <div> tag and assign it an id of #myForm:

<div id="myForm">
  <p>
    <form action="" method="post>
      <label for="un">Username</label>
      <input type="text" id="un" placeholder="Enter username" />
      <br/>
      <label for="pw">Password</label>
      <input type="password" id="pw" placeholder="Enter password" />
      <br/>
      <input type="submit" value="Login" />
    </form>
  </p>
</div>

To adjust the alignment using CSS, utilize top: __% according to your preference:

#myForm {
    position: absolute;
    top: 20%;
    left: 50%;
}

See the Demo on Fiddle[Updated]

Answer №3

To center the form vertically within #content, you can use the following CSS:

#content form {
    display: table-cell;
    vertical-align: middle;
}

DEMO

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

Addressing the spacing and alignment issues within the progress bar

I need some help with my Angular app. I am currently working on creating a progress bar, but I am facing some issues with the alignment of the bars. Here is the code snippet that I have used: CSS: .progressbar { position: relative; height: 56px; mar ...

Transferring JavaScript to a different page using EJS

Feeling a little stuck here and could use some assistance. It seems like a simple issue, but I'm tired and could really use a fresh pair of eyes to take a look. I'm trying to pass the 'username' variable, but since I'm new to this ...

When a table is required, .data() will provide a string

Within my HTML code, there is a table structure defined as follows: <table id="table" data-keys="{{keys}}"> Here, the keys variable represents an array (as I later iterate through it using {% for k in keys %}). However, when I t ...

Using Paper Checkbox to Toggle the Visibility of a Div in Polymer

Having experience with Meteor, I typically used JQuery to toggle the display of a div along with paper-checkbox: HTML: <paper-checkbox name="remoteLocation" id="remote-chk" checked>Remote Location</paper-checkbox> <div id="autoUpdate" clas ...

Secondary navigation bar remains hidden

I am facing an issue with the sub menu bar on this website. I am using the Constellation theme for WordPress and have attempted to adjust margins in order to make it visible, but so far I have been unsuccessful. The sub menu is meant to be responsive, yet ...

What is the best way to target the final child element of a specific CSS class?

I am working with an HTML table and my goal is to remove the border-bottom from the last row, excluding the row with class .table-bottom: <table cellpadding="0" cellspacing="0" style="width:752px;" class="table"> <tr class="table-top">< ...

Is it possible to resize a div based on the width of the window?

Imagine a scenario where it's not possible to change the content of a div, but only its shape and size by using transform: scale(1.4) for instance. To better understand this concept, take a look at This Website and try resizing the window using brows ...

The successful execution of $.ajax does not occur

Starting out with ajax, I wanted to create a simple add operation. Here is the code that I came up with: HTML: <!doctype html> <html> <head> <title>Add two numbers</title> <meta content="text/html;charset=utf-8" h ...

Making a linked div with background image

I'm attempting to turn the small icons on this particular page () into clickable links. Each icon is contained within its own div, but no matter what I do: <div class="social-btn pinterest"><a href="http://www.pinterest.com/etc.etc.">&l ...

Determining the Last Modified Date for a Sitemap using Javascript

I am trying to replicate the date format shown within <lastmod></lastmod> tags in a sitemap.xml file. How can I do this? The desired output is as follows: <lastmod>2016-01-21EEST18:01:18+03:00</lastmod> It appears that 'EEST ...

Elegant Border Separator

I'm attempting to achieve the design below (with a 1 pixel gap on each end): ...

Obtained a ZIP file via CodeSandbox that contains a Vue.JS webpage. However, the index.html file yielded an

I have created my first ever Vue.JS / Vue2Leaflet app. It runs perfectly fine on codesandbox.io. However, when I download the ZIP file and try to open the index.html file, it appears blank. Is there something specific that needs to be done to make it work, ...

What is the correct way to implement ::v-deep(<inner-selector>) in a Vue component?

I am attempting to assign an existing style class to a child element that will be loaded using the v-html directive. Since /deep/ and >>> are no longer supported, I have tried using ::v-deep in Vue. <template> <div v-else v-html="chi ...

Reorganize items that extend beyond the list into the next column using Bootstrap

I have a row with two columns, where Column 1 currently contains 7 list items under the ul tag. However, I want to display only 5 list items in Column 1 and automatically move the remaining items to the next column (i.e., Column 2). Is there a way to ach ...

Angular: Excessive mat-menu items causing overflow beyond the page's boundaries

Within my mat-menu, there is a div for each mat-menu item. The number of items varies depending on the data retrieved. However, I noticed that when there are more items than can fit in the menu, it extends beyond the boundaries of the mat-menu instead of ...

What is the reason for the failure of this code to store data in local storage (undefined)?

After creating a new div with data from an input form, I noticed that the first div properly saves the inputted data. However, when I try to input new data, the div displays an undefined value. first attempt second attempt 0: {name: "Milk", amount: "30"} ...

What is the process for creating URL query parameters?

What is the process for generating parameters after node?_=xxxxxx? If I am using a Python script to access the URL, how can I retrieve these parameters? edit: I apologize for not providing enough information. This is my first post as a novice. I am atte ...

Can 'fr' units be used in the `calc()` function of CSS?

In this particular scenario, the query arises whether the CSS calc() function extends its support to the fr unit as presented in the below example? .sample-grid { --main-fr: 60fr; grid-template-columns: var(--main-fr) 1rem calc(100 - var(--main-fr ...

Text remains constant until the mouse hovers over the image

Check out this Example Here is the HTML code: <ul class="img-list"> <li> <img src="http://s11.postimg.org/ynw9rnexf/Cetina_river.jpg" width="360px" height="280px" /> <span class="text-content"><span> Text To Dis ...

Leveraging CSS and JQuery to manage an iframe with a programmed autoplay feature embedded within

My presentation was created using Adobe Presenter and inserted via an iframe with autoplay enabled upon publication. This means that as soon as the page loads, the presentation begins automatically along with the audio. Since I am unable to disable autopl ...