aligning a form vertically in a container

Question

aligning a form vertically in a container

<div class="parent">
    <div class="left-child">
        <img src="logo.jpg" alt="logo">
    </div>
    <div class="right-child">
        <form action="#">
            <input type="text" value="search">
        </form>
    </div>
</div>

Is there a way to vertically align the right-child form as the height of the left-child logo changes?

Any assistance would be greatly appreciated.

Note: The logo's height will vary since it is uploaded by the user. Therefore, the exact height is unknown to me.

html css forms

Answer 1

Answer №1

I have customized a new div structure to better suit the layout of your form in a vertical orientation. I took the liberty of adjusting the image width, though feel free to remove this modification if needed. You can view the updated format here.

Below is the CSS code:

.parent {
    border: 1px dashed red;
    display: table;        
    overflow: auto;
}

.left-child img {
    width: 50px;
    height: 50px;
}

.left-child {
    border: 1px dashed blue;        
}

.right-child {
    border: 1px dashed green;
    display: table-cell;
    vertical-align: middle;                        
}

#your_form {
    margin: 0 auto;
    width: 200px;
}

And here is your html structure:

<div class="parent">
    <div class="left-child">
        <img src="icons.jpg" alt="logo" />
    </div>
    <div class="right-child">
        <div id="your_form">
            <form action="#">
                <input type="text" value="search" />
            </form>            
        </div>            
    </div>
</div>

Warm regards, Vin.

Answer 2

I have customized a new div structure to better suit the layout of your form in a vertical orientation. I took the liberty of adjusting the image width, though feel free to remove this modification if needed. You can view the updated format here.

Below is the CSS code:

.parent {
    border: 1px dashed red;
    display: table;        
    overflow: auto;
}

.left-child img {
    width: 50px;
    height: 50px;
}

.left-child {
    border: 1px dashed blue;        
}

.right-child {
    border: 1px dashed green;
    display: table-cell;
    vertical-align: middle;                        
}

#your_form {
    margin: 0 auto;
    width: 200px;
}

And here is your html structure:

<div class="parent">
    <div class="left-child">
        <img src="icons.jpg" alt="logo" />
    </div>
    <div class="right-child">
        <div id="your_form">
            <form action="#">
                <input type="text" value="search" />
            </form>            
        </div>            
    </div>
</div>

Warm regards, Vin.

Answer 3

Answer №2

If you have divs set to display: inline-block, then you can utilize vertical-align: middle. However, this method is not compatible with floats:

.left-section,
.right-section {
    display: inline-block;
    vertical-align: middle;
}

For a live example, check out this link: http://jsfiddle.net/abc123/def456/

Keep in mind that using inline-block may not work on older browsers such as IE7. More information can be found here: http://caniuse.com/inline-block

Answer 4

If you have divs set to display: inline-block, then you can utilize vertical-align: middle. However, this method is not compatible with floats:

.left-section,
.right-section {
    display: inline-block;
    vertical-align: middle;
}

For a live example, check out this link: http://jsfiddle.net/abc123/def456/

Keep in mind that using inline-block may not work on older browsers such as IE7. More information can be found here: http://caniuse.com/inline-block

Answer 5

Answer №3

HTML Code:

<div class="wrapper">
    <div class="left-side">
         <div><img src="logo.jpg" alt="logo" /></div>
    </div>
    <div class="right-side">
        <form action="#">
            <input type="text" value="search1" /><br/>
            <input type="text" value="search2" /><br/>
            <input type="text" value="search3" />
        </form>
    </div>
</div>

CSS Styles:

.wrapper {
    height: 400px;
    width: 100%;
    position: relative;
}

.left-side {
    width: 50%;
    height: 100%;
    display: table;
    position: absolute;
}
.left-side div {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.right-side {
    width: 50%;
    height: 100%;
    display: table;
    position: absolute;
    left: 50%;
}

.right-side form {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

Source

Live Demo

Answer 6

HTML Code:

<div class="wrapper">
    <div class="left-side">
         <div><img src="logo.jpg" alt="logo" /></div>
    </div>
    <div class="right-side">
        <form action="#">
            <input type="text" value="search1" /><br/>
            <input type="text" value="search2" /><br/>
            <input type="text" value="search3" />
        </form>
    </div>
</div>

CSS Styles:

.wrapper {
    height: 400px;
    width: 100%;
    position: relative;
}

.left-side {
    width: 50%;
    height: 100%;
    display: table;
    position: absolute;
}
.left-side div {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.right-side {
    width: 50%;
    height: 100%;
    display: table;
    position: absolute;
    left: 50%;
}

.right-side form {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

Source

Live Demo

Answer 7

Answer №4

The optimal solution moving forward involves implementing the flex box model

Below is the CSS code required to facilitate your needs http://jsfiddle.net/BfZFJ/1/

.parent {
    /* Utilize flex box layout for arranging its children */
    display: box;
    /* Vertically center its children */
    box-align: center;    
}    

.right-child {
    /* The child on the right will occupy all remaining horizontal space */
    box-flex: 1;
}

/* No additional adjustments needed for left-child, it automatically takes up its natural size */

It's important to note that in practice (at least for now), you must incorporate vendor prefixes:

display: [-webkit-box, -moz-box]
-webkit-box-flex, -moz-box-flex
-webkit-box-align, -moz-box-align

Answer 8

The optimal solution moving forward involves implementing the flex box model

Below is the CSS code required to facilitate your needs http://jsfiddle.net/BfZFJ/1/

.parent {
    /* Utilize flex box layout for arranging its children */
    display: box;
    /* Vertically center its children */
    box-align: center;    
}    

.right-child {
    /* The child on the right will occupy all remaining horizontal space */
    box-flex: 1;
}

/* No additional adjustments needed for left-child, it automatically takes up its natural size */

It's important to note that in practice (at least for now), you must incorporate vendor prefixes:

display: [-webkit-box, -moz-box]
-webkit-box-flex, -moz-box-flex
-webkit-box-align, -moz-box-align

aligning a form vertically in a container

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the best way to include an active item within an li tag inside a div container?

Is there a way to create triangles on all four corners of an image using canvas in JavaScript?

Dynamic Form Layout with Angulajs' Adaptive Data

Change the appearance of a specific div within a collection of div elements using React

Uncommon Two-Toned CSS Gradients

Creating a scrolling background effect using HTML and CSS: ``Background Parallax

jQuery Slider not appearing on the page

Is $ROW not defined?

Avoiding conflicts: Using Tabs with Revolution Slider without jQuery interference

"Step-by-step guide on creating a web app with a transparent background while simultaneously running other processes

Struggling to integrate buttons into an h2 element with the use of createElement() and appendChild() in HTML/CSS/JS

Retrieving the CSS property values for a specific element using Selenium

designing items in various color palettes

The function 'find' cannot be invoked on an undefined object

Denied running the inline script in Redocly

Responsive div not displaying background image

What is the best way to define ngOptionValue for my ng-option selection?

Issues arise when attempting to determine the accurate dimensions of a canvas

Problem with the `file` input not working properly

Unable to identify the Xpath selector for the "Account settings button" and "find my iPhone" features within iCloud