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

Tips for aligning multiline text in the center of images with varying widths

Utilize Python to extract a table from an HTML document

How can you determine the specific type of "display" utilized by CSS Bootstrap for a particular element?

The setStyle() method in JavaFX is like CSS Selectors

Switch between different content sections using a button in a Bootstrap tab-pane

Implementing CSS styles with jQuery

Upon returning to the website homepage from another page, the JavaScript animation ceases

Using JavaScript to convert the text within a div into negative HTML code

Ways to add extra dots to your listing style

What steps do I need to take in order to ensure that each webpage displays unique thumbnails?

Verifying file types with HTML5 drag and drop feature

Ways to prevent a particular link from functioning in HTML or JavaScript

Creating a customizable navigation bar using only CSS

Printing from a Windows computer may sometimes result in a blank page

Adjust positioning of navigation when hovered over

A step-by-step guide on setting up a confirmation pop-up message using Gravity Forms

What is the best way for me to make my hamburger animation play in reverse?

Having trouble scrolling on a Chrome browser with the Muse website?

Tips for confining a float within a div with fluctuating space

Eliminate the horizontal overflow caused by the HTML video tag