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.

htmlcssvertical-alignmentalignment

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

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 №3

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

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 №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.

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

Is there a software available that can transform <style> blocks into inline CSS code?

Is there a tool available that can convert <style> blocks to the corresponding style attributes in an HTML file? For instance, if we have the following input file: <html> <head> <style> .myclass { color:red; } </style> &l ...

htmlcss

CSS for mobile devices not loading until the device is rotated

My website, redkrypt.com, is functioning perfectly on my laptop. However, I am facing an issue where the css file will only load on my iPhone 4S after I rotate it once. Once I do this, the website works both vertically and horizontally. I have tried variou ...

htmlcssiphoneresponsive-designmedia-queries

CSS Problem: The buttons beneath the div disappear when I apply a margin

Kindly click on the links below to view the images. The first image displays the desired design I am aiming for. The text and blue background are part of the image, and there is a button located below them. However, whenever I adjust the top margin, it ge ...

htmlcsswordpressbootstrap-4

Submitting data through a PHP server-side script

I am facing a dilemma regarding why the form is not submitting and directing me to the index.php page. Being new to PHP, I am attempting to utilize the User object. Below is my current progress: <main> <header> <h1>Cr ...

phphtmlclient-serversql-update

Pattern matching: Identify text elements specifically within an HTML tag

I've been experimenting with a text highlighting script. Check out my initial attempt here. Here's the code snippet: http://jsfiddle.net/TPg9p/3/ However, I encountered a problem – it only works with simple strings and not those containing HT ...

javascriptjqueryhtmlregexdom

Modify the text tone within a specific cell

Welcome to my unique webpage where I have implemented a special feature. The text highlighted in red represents the unique identifier for each individual cell. Interestingly, below there is an input field containing the code "0099CC", which corresponds to ...

javascriptcss

Using PHP to create a loop that generates a multi-radio form: a step-by-step guide

Despite coding it this way, the multiple radio form is still not functioning as intended. I attempted to utilize fieldset, but to no avail. How can I rectify this issue? Could using various ID's for fieldset assist in creating multiple forms correctly ...

phphtmlformsfor-loopradio-button

Adjusting ToggleButton hues in react-bootstrap

I am working with a group of ToggleButtons in my app and I want to customize their background colors. Currently, all the buttons have a gradient defined by <.untoggled-button> class, with an added blue overlay for unselected buttons. However, I am fa ...

cssreactjsreact-bootstrap

"Combining background images with javascript can result in displaying visual elements

Hello! I am in need of assistance with a CSS + Javascript fog effect that I have developed. It is functioning properly on Firefox, Opera, and Chrome but encountering issues on IE and Edge browsers. The effect involves moving two background images within a ...

javascripthtmlcssinternet-explorermicrosoft-edge

Executing SQL Query on Button Click Event

I am working with PHP and trying to execute a SQL query when a button is pressed. However, the issue I'm facing is that nothing happens when I click the button! I checked the developer console but there doesn't seem to be any action detected when ...

phpjqueryhtmlajax

Issues with executing google.script.run in Google Web App

I am encountering an issue with the function I have defined in my .gs file: function doGet(e) { return HtmlService.createHtmlOutputFromFile('index') } function goToMaster() { const ss = SpreadsheetApp.getActiveSpreadsheet() const sheet = s ...

javascripthtmlgoogle-apps-scriptgoogle-sheets

Angular 8: Implementing Form Validation with a Boolean Flag

Within my HTML code, I have a function (change)="limitUser($event)". In Typescript, I utilize a for loop to iterate through each element and determine if the value is less than 10. If it exceeds 10, the inValid = true condition is set. All form fields in m ...

htmlangulartypescriptvalidationangular8

Unforeseen behavior in Ajax success callback

My unordered list contains a href link. Initially, only the welcome page is visible on page load. Upon clicking the list for the first time after page load, the desired results are displayed in the corresponding div as expected. The issue arises when swi ...

javascriptjqueryhtmlajax

Clicking on a flex card will trigger the opening of a new page where the parsed data will be displayed in a stylish manner using JavaScript

Currently, I am attempting to showcase the data retrieved from the following URL: . My objective is to format the parsed data with a specific style. However, I have encountered difficulties accomplishing this using `window.open()`. Any assistance in resolv ...

javascriptjqueryhtmlcss

Choose the initial drop-down option and concentrate on it

How can I target the first drop down node (select element)? I have tried using this code to focus on the first input, but I am looking for a way to target the first select (drop down). $('.modal :input:first').focus(); Unfortunately, this meth ...

jqueryhtmlcss

Flexbox: Arrange header and footer in a sidebar layout using flexbox styling

In my content layout, I have structured the sections as header, content, and footer. While I want to maintain this order for small devices, I am looking to shift the header and footer to the sidebar on desktop. I have already implemented this using floats ...

htmlcssflexbox

Stylesheets may not display correctly in Firefox and IE

Just wanted to say that I recently put together this little website , but I am completely stumped on why the CSS file won't show up in Firefox or IE. I know it's a basic question, but I'm still learning all of this. Thank you so much for a ...

htmlcss

Increase the value by one of the number enclosed in the <h3> element

I have a variable number of <h3> tags with the same class .love_nummer <h3 class="love_nummer">1</h3> Each of these tags contains a number, and alongside each .love_nummer tag is another tag with the class .give_love <h3 class="give ...

jqueryhtmlnumbers

What is the best way to trigger a function once another one has finished executing?

After opening the modal, I am creating some functions. The RefreshBirths() function requires the motherId and fatherId which are obtained from the getDictionaryMother() and getDictionaryFather() functions (these display my mothers and fathers on the page s ...

javascripthtmljqueryajaxbootstrap-5

Utilizing WordPress to dynamically update the footer content on a targeted webpage by modifying the HTML/PHP/JS code

Let me provide some clarity. Details: - Website built on WordPress This website is bilingual with Hebrew and English languages. The issue is with the footer section. I have 4 lines that need to display: - Address: ........ - Phone: ....... - Fax: ...... - ...

javascriptphphtmlwordpress