Center a single div vertically within a parent div by utilizing a fluid layout

Question

Center a single div vertically within a parent div by utilizing a fluid layout

Attempting to align text elements within a responsive layout presents challenges due to the fluid nature of <div> sizes.

I recently discovered a fantastic method for horizontally and vertically centering a child <div> inside its parent <div>, which can be seen in action here: fiddle. (Originally shared in the second technique of this guide)

However, upon closer inspection of the fiddle, it's evident that the Large Text element isn't perfectly centered vertically within the parent <div class="block">; instead, the entire child <div class="centered"> is centered.

When attempting to split the two text elements into separate <div>s and center only the one containing the Large Text element, the alignment becomes disrupted as the second <div> with the small text is moved outside the parent <div class="block">

What adjustments can be made to the existing centering solution to ensure the Large Text element is perfectly aligned within the parent <div class="block">, while still accommodating the presence of the small text element positioned just below the Large Text?

html css centering fluid-layout

Answer 1

Answer №1

vertican-align was brought into CSS to replace the valign HTML attribute for tables. It's important to note that using display:inline-block; will not create a table cell and won't be perfectly centered with vertical-align. A workaround is using display:table on the parent and display:table-cell on the child, unless you don't mind excluding < IE8.

Aside from the mentioned method, there isn't a straightforward way to center within a parent. However, if you know the element's height, you can apply an old image placement trick on divs as well.

<div>
    <p>Centered Text, Horizontally and Vertically</p>
</div>

Here's the CSS:

div {
    positon:relative;
    text-align:center;
    height:400px;
}

div p {
    position:relative;
    display:inline-block;
    height:30px;
    margin-top:-15px;
    top:50%;
    background-color:#cccccc;
}

Example in Fiddle

If the above method doesn't work for you, you can also absolutely position the <p>, but then you'll need to horizontally center it without relying on text-align:center on the parent or display:inline-block on the child.

Answer 2

vertican-align was brought into CSS to replace the valign HTML attribute for tables. It's important to note that using display:inline-block; will not create a table cell and won't be perfectly centered with vertical-align. A workaround is using display:table on the parent and display:table-cell on the child, unless you don't mind excluding < IE8.

Aside from the mentioned method, there isn't a straightforward way to center within a parent. However, if you know the element's height, you can apply an old image placement trick on divs as well.

<div>
    <p>Centered Text, Horizontally and Vertically</p>
</div>

Here's the CSS:

div {
    positon:relative;
    text-align:center;
    height:400px;
}

div p {
    position:relative;
    display:inline-block;
    height:30px;
    margin-top:-15px;
    top:50%;
    background-color:#cccccc;
}

Example in Fiddle

If the above method doesn't work for you, you can also absolutely position the <p>, but then you'll need to horizontally center it without relying on text-align:center on the parent or display:inline-block on the child.

Answer 3

Answer №2

If you're in need of a solution, I have created a demo for you to check out: http://example.com/demo

To achieve the desired effect, ensure that the large text (identified as '.title' in my demo) has a fixed height. Then utilize negative margin on the .box element to move it upwards, setting the value equal to the height of the .title.

The structure should look like this:

<div class="container">

    <div class="box">
        <h1 class="title">Title</h1>
        <p>Some text</p>
    </div>

</div>

CSS:

.container {
    display: inline-block;      
    text-align: center;
    }
    .container:before {
        content: '';
        height: 100%;
        display: inline-block;
        vertical-align: middle;
        margin-right: -4px;
        }

    .box {
        display: inline-block;
        vertical-align: middle;
        width: 400px;
        margin-top: 70px; /* Height of .title. This is equivalent to the line-height of .title */
        }
    .title {
        display: block;
        margin: 0;
        padding: 0;     

        line-height: 70px;/* Adjust based on your design requirements */ 
        }

Answer 4

If you're in need of a solution, I have created a demo for you to check out: http://example.com/demo

To achieve the desired effect, ensure that the large text (identified as '.title' in my demo) has a fixed height. Then utilize negative margin on the .box element to move it upwards, setting the value equal to the height of the .title.

The structure should look like this:

<div class="container">

    <div class="box">
        <h1 class="title">Title</h1>
        <p>Some text</p>
    </div>

</div>

CSS:

.container {
    display: inline-block;      
    text-align: center;
    }
    .container:before {
        content: '';
        height: 100%;
        display: inline-block;
        vertical-align: middle;
        margin-right: -4px;
        }

    .box {
        display: inline-block;
        vertical-align: middle;
        width: 400px;
        margin-top: 70px; /* Height of .title. This is equivalent to the line-height of .title */
        }
    .title {
        display: block;
        margin: 0;
        padding: 0;     

        line-height: 70px;/* Adjust based on your design requirements */ 
        }

Center a single div vertically within a parent div by utilizing a fluid layout

Answer №1

Answer №2

Similar questions

Tips for creating a responsive iframe without relying on aspect ratio assumptions

Reacting to a situation where the tailwind grid has an issue: the responsive column span is visible in the HTML, but

The fixed div with the z-index at the top isn't functioning properly

Navigate through the options on the left menu by sliding your

Identify and target a particular DIV based on the URL for customization

What is the best way to determine the position of an element with text content

Rectangles on canvas, each with identical dimensions, appear in varying sizes when positioned at different locations

Malfunctioning Line in Apple Safari Causing ReactJS Issues

Tips for styling your Angular Material Card on mobile devices

Draggable slider not functioning properly with linear interpolation

Place the delete and edit buttons on the right side of the card

Escape sequences do not seem to be functioning properly when using innerHTML

Fade out a component in Material UI/React by setting a timeout in the parent's useEffect hook for when it unmounts

Create a duplicate of a div element, including all of its nested elements and associated events, using

Tips for avoiding HTML injections in HTML tooltips

Step-by-step guide on integrating node.js and MySQL to store data from an online form in a database

How can you dynamically disable the submit button on a form in Angular 7+ based on the form's current status?

The art of uploading images with HTML and CSS

What is the Angular alternative to control.disable when working with a QueryList?

Scrollbar width does not expand when hovered over