Trouble aligning div elements vertically within another div

Why aren't the divs inside #inner vertically aligning? It's important to note that I am using IE 8 and CSS, not CSS3, in case that matters. Here is my HTML:

<div class="Content">

    <div id="home">
        <div id="inner">
                <div id="stuff">HeadingOne</div>
                <div>HeadingTwo</div>
                <div>HeadingThree</div>
        </div>
    </div>

</div>

This is my CSS:

    #inner div {
         display: inline;
    }

    #home #inner {
        margin: 0px auto;
        vertical-align: middle;
    }

    #home {
        display: table-cell;
        vertical-align: middle;
        text-align:center;
    }

I've tried using display: table-cell; and then vertical-align: middle, but it didn't work. Any ideas why? I specifically need the '#inner div' displays to be inline. I want the three divs inside #inner to be inline and in the center of Content.

Answer №1

Your utilization of the display property is not effective. Consider implementing the following CSS code:

#main {
    display: table;
    text-align: center;
}    
#main #content {
    display: table-cell;
    height: 50px;
    background-color: #ccc;
    vertical-align: middle;
}
#content div {
    display: inline-block;
}

For a visual representation in IE8, please visit this link: http://jsfiddle.net/rd2Hc/18/embedded/result/

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 way to eliminate the outline on a FormControl component in React-bootstrap when the input field is selected?

Currently, I'm working on creating a search bar with dropdown suggestions using React-bootstrap. My goal is to have the search bar span across the page from one side to another with margins on the left and right. To achieve this, I am enclosing the in ...

The system considers the resource as a script, yet it was transmitted with the MIME type of text

I am encountering an issue when trying to integrate AngularJS/JavaScript into my HTML document. Each time I try to load my index.html file, the following error message appears: Resource interpreted as Script but transferred with MIME type text/html: "http ...

Executing a specific block of Python code is contingent on selecting a row from a MySQL database

I have innovatively created a unique project involving musical stairs using Python, motion sensors, Raspberry Pi, and a web application. The web app allows users to select the type of instrument sound they want to produce, which is stored in a MySQL databa ...

Creating horizontal cards with Angular MaterialWould you like to learn how to design

I need help converting these vertical cards into horizontal cards. Currently, I am utilizing the Angular Material Cards component. While I can successfully create cards in a vertical layout, my goal is to arrange them horizontally. Below is the code sni ...

What steps should I take to ensure this image automatically refreshes once it has been uploaded?

I have granted permission for administrative staff on our ASP.NET website to upload their profile pictures. The process is simple: just use basic file uploading controls: <img src="<%#ImageFile%>" border='0' width="150" alt="" height="1 ...

Div with full height will not have scrollbars

As I work on developing a chat site, I've come across a peculiar issue with the chat display feature. Currently, my jQuery code dynamically adds chat rows to a div. My goal is to set the height of this div to 100% so that it adjusts based on the user& ...

Tips on embedding an HTML page within another HTML page by utilizing a custom directive in AngularJS

I am looking to utilize custom directives in order to insert one HTML page into another. How can I achieve this? The custom directive code is as follows: (here is the .js file) fbModule.directive('fbLogin', function(){ return { ...

associating the highlighted text with a specific attribute of the selectbox

Using my coding skills, I developed a small application that enables users to add text from a textarea to a div block. My goal is to prevent the appended text when the user clicks on the yellow div, and highlight the selected text properties (such as font ...

The SetTimeout tooltip will only appear when the mouse is moved

Utilizing the Cool DHTML tooltip script provided by © Dynamic Drive DHTML code library, I have customized it to display a tooltip that I created. To ensure that the Tooltip does not appear instantly, I have incorporated a simple code modification: Upon ...

Challenges arise when utilizing the foundation 6 grid for image overlays within a React application

Having some trouble using the foundation 6 xy grid for the first time and aligning three images with text overlays at the bottom of each image. I am struggling to make the background of the text fill the full width of the image while also ensuring it is re ...

Implementing websocket functionality in Yii framework

I am currently working on integrating websocket functionality into my web application using PHP and as an extension for Yii. This will allow me to create a notification system similar to what I have in mind. My starting point is the code available at the ...

Changing the text color of Material UI Accordion Summary upon expansion

How can I update the color of an Accordion summary text in Material UI when it is expanded? <Accordion expanded={expanded === 'panel1'} onChange={handleChange('panel1')} className={classes.root}> <AccordionSummary ...

A CSS3 property that does not have a vendor prefix, followed by properties that do have vendor prefixes

As discussed in a response on Stack Overflow, one reason for the necessity of vendor prefixes in CSS properties is to prevent web pages from breaking even if the final specification varies from the implementation by different browsers. In a recent reading ...

Tips on utilizing innerHTML or innerText to add content to the Evernote editor, a rich text editor

A method authored by Jayant was employed in this particular post how-to-insert-text-into-the-textarea-at-the-current-cursor-position to perform an insertion into the Evernote editor. The Evernote editor being a rich text editor, altering from el.value to ...

I want to learn how to display the rupee symbol instead of the default dollar symbol in AngularJS for specific currency symbols

When using 'currency' in AngularJS, I noticed that a dollar symbol is displayed. How can I change this to show the required currency symbol based on different requirements? Currently, I am looking for information on how to display a rupee symbol ...

Conceal navigation button within react-material-ui-carousel

After successfully incorporating the React Material UI carousel, I found it to be quite simple. However, one thing that eluded me was how to hide the buttons and only display them on hover. I tried setting the props navButtonsAlwaysVisible to false, but it ...

Show the selected values of different checkboxes

Can anyone assist me with jQuery? I have an easyui accordion containing text and checkboxes, with multiple inputs within each accordion. The values of the inputs are retrieved from PHP arrays. I am trying to display the value of each input when checked ( ...

the best way to transfer a JavaScript value to a PHP page

I am experiencing an issue with an undefined function in my PHP page. I have tried everything and it just doesn't seem to work for me. Can anyone please assist me with this problem? <!DOCTYPE html> <html> <head> <scrip ...

Troubleshooting issue with CSS code for table scrolling functionality

I have created an HTML page with a table that gets data from a database. I am trying to limit the size of the table by placing it inside a div like this: <div id="scrollablebody"> <table class="clientTable"> <thead> <tr ...

Issue encountered with ngFor: 'Identifier not defined __type does not have any such member'

Recently, I successfully implemented a sub-component that allows users to dynamically add and remove a set of controls to and from a collection. The inspiration for this solution came from reading through this particular thread on Stack Overflow. While ev ...