How can I fix the alignment issue with my centered div?

Question

How can I fix the alignment issue with my centered div?

My attempt to vertically align a centered inner DIV is not working as expected...

What could be causing this issue?

CSS Code:

#page_bar
{
    width: 100%;
    height: 30px;
    background-color: white
}

.page_bar
{
    width: 800px;
    height: 30px;
    display: table-cell;
    vertical-align: middle
}

HTML Code:

<div id="page_bar">
    <div class="page_bar">
        Mapa Strony
    </div>
</div>

EDIT: I am aiming to center the inner DIV itself, not just the text inside of it...

EDIT: Take a look at: - the silver area should be centered, meaning the inner div needs to be centered, not just the text within it.

html css vertical-alignment alignment

Answer 1

Answer №1

If you're looking to center the .page_bar class horizontally with the table-cell display, it seems like wrapping it may be necessary.

#wrap{
    margin: 0px auto;
    display:table;
}

#page_bar
{
    width: 100%;
    height: 30px;
    background-color: white
}

.page_bar
{
    width: 800px;
    height: 30px;
    display: table-cell;
    text-align: left;
    vertical-align: middle;
    margin: 0px auto;
}

<div id="page_bar">
    <div id="wrap">
        <div class="page_bar">
            Mapa Strony
        </div>
    </div>
</div>

Answer 2

If you're looking to center the .page_bar class horizontally with the table-cell display, it seems like wrapping it may be necessary.

#wrap{
    margin: 0px auto;
    display:table;
}

#page_bar
{
    width: 100%;
    height: 30px;
    background-color: white
}

.page_bar
{
    width: 800px;
    height: 30px;
    display: table-cell;
    text-align: left;
    vertical-align: middle;
    margin: 0px auto;
}

<div id="page_bar">
    <div id="wrap">
        <div class="page_bar">
            Mapa Strony
        </div>
    </div>
</div>

Answer 3

Answer №2

This content will be both horizontally and vertically centered:

#content_container
{
    width: 100%;
    height: 200px;
    background-color: blue;
    text-align: center;
}

.content_item
{
    width: 600px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

jsfiddle: http://jsfiddle.net/AbCdE/4/

Answer 4

This content will be both horizontally and vertically centered:

#content_container
{
    width: 100%;
    height: 200px;
    background-color: blue;
    text-align: center;
}

.content_item
{
    width: 600px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

jsfiddle: http://jsfiddle.net/AbCdE/4/

Answer 5

Answer №3

What happens when you apply the style text-align:center; to the element with ID #page_bar ?

Answer 6

What happens when you apply the style text-align:center; to the element with ID #page_bar ?

Answer 7

Answer №4

Set the vertical alignment to middle.

You may have missed adding a semicolon here. Also, please ensure there is a 2-3px space between 30-27 or 33-30.

Answer 8

Set the vertical alignment to middle.

You may have missed adding a semicolon here. Also, please ensure there is a 2-3px space between 30-27 or 33-30.

Answer 9

Answer №5

After spending a considerable amount of time trying different solutions, I was able to identify a straightforward fix for this issue.

Simply adding 'display:table-cell' to an element and applying 'display:table' to the parent will ensure that vertical alignment behaves as intended.

Answer 10

After spending a considerable amount of time trying different solutions, I was able to identify a straightforward fix for this issue.

Simply adding 'display:table-cell' to an element and applying 'display:table' to the parent will ensure that vertical alignment behaves as intended.

How can I fix the alignment issue with my centered div?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Combine the text of the button onto a single line

Different ways to rearrange the placement of Export buttons in a personalized div or outside the table using Datatable

Steps to make a pop-up window for text copying by users

Reading complex table structures with Selenium

Implementing a Custom CSS Theme in JavaFX

Our website features a dynamic functionality where users can select from two dropdown lists with identical values. Upon selecting multiple values from the first dropdown, the corresponding values in

The execution of jQuery was hindered due to the implementation of PHP include

Stopping the Game Loop in Windows Phone 8.1 with WinJS

Arranging elements in a row and column to ensure proper alignment

Add fresh inline designs to a React high-order component creation

Fixed top bar and navigation menu, with a body that can be scrolled

When pressed, the button changes color to a vibrant shade of blue, and not just a simple outline

Hover effects in CSS animations can be hit or miss, with some working smoothly while others may

Combining classes within LessCSS for nested functions

Validating the similarity of classes with JQuery

Switching between various quantities of inputs in each row using Bootstrap V3

Automatic switching between Bootstrap 5 tab panes at precise time intervals

Issues with SQL query execution in PHP with mySQL causing no results to be returned

LinkedIn's website consistently displays a "1 min read" indicator when sharing articles or

The combination of using p:inputText within p:layoutUnit does not function properly when placed inside p