Achieve center alignment of a div within another div by utilizing the display property

Question

Achieve center alignment of a div within another div by utilizing the display property

Here is my code snippet:

#innerLabels,
#innerFields {
  display: inline-block;
  width: 200px;
  height: 200px;
  border-style: solid;
  border-width: 1px;
  vertical-align: top;
}
.innerLabel {
  display: table;
  border-style: solid;
  border-width: 1px;
  height: 100px;
  width: 80%;
}
.innerLabel div {
  display: table-cell;
  vertical-align: middle;
  border-style: solid;
  border-width: 1px;
}
#outterFields {
  background-color: red;
  width: 60%;
  min-width: 300px;
  height: 300px;
}
#outterFields div {
  display: inline-block;
}

<div id="outterFields">
  <div id="innerLabels">
    <div class="innerLabel">
      <div>hello</div>
    </div>
  </div>
</div>

I am trying to center the inner most div vertically, but it's not working as expected. I have reviewed solutions for centering elements, but can't seem to find the issue...https://i.sstatic.net/0xhNi.png

The goal is to vertically center the text "hello" without affecting the horizontal alignment. All other divs are correctly positioned next to each other. I only need to adjust the positioning of the "hello" div vertically.

html css

Answer 1

Answer №1

You are simply overwriting your inner div with

#outterFields div {
    display: inline-block;
}

Simply remove it or if you intended to target a direct child, do:

#outterFields > div {
    display: inline-block;
}

#innerLabels,
#innerFields {
  display: inline-block;
  width: 200px;
  height: 200px;
  border-style: solid;
  border-width: 1px;
  vertical-align: top;
}
.innerLabel {
  display: table;
  border-style: solid;
  border-width: 1px;
  height: 100px;
  width: 80%;
}
.innerLabel div {
  display: table-cell;
  vertical-align: middle;
  border-style: solid;
  border-width: 1px;
}
#outterFields {
  background-color: red;
  width: 60%;
  min-width: 300px;
  height: 300px;
}
#outterFields div {
 /* display: inline-block; */
}

<div id="outterFields">
  <div id="innerLabels">
    <div class="innerLabel">
      <div>hello</div>
    </div>
  </div>
</div>

Answer 2

You are simply overwriting your inner div with

#outterFields div {
    display: inline-block;
}

Simply remove it or if you intended to target a direct child, do:

#outterFields > div {
    display: inline-block;
}

#innerLabels,
#innerFields {
  display: inline-block;
  width: 200px;
  height: 200px;
  border-style: solid;
  border-width: 1px;
  vertical-align: top;
}
.innerLabel {
  display: table;
  border-style: solid;
  border-width: 1px;
  height: 100px;
  width: 80%;
}
.innerLabel div {
  display: table-cell;
  vertical-align: middle;
  border-style: solid;
  border-width: 1px;
}
#outterFields {
  background-color: red;
  width: 60%;
  min-width: 300px;
  height: 300px;
}
#outterFields div {
 /* display: inline-block; */
}

<div id="outterFields">
  <div id="innerLabels">
    <div class="innerLabel">
      <div>hello</div>
    </div>
  </div>
</div>

Answer 3

Answer №2

Your outer field's display inline block is causing conflicts with other display elements. Allow me to propose a more effective solution. Instead of using tables, I have implemented flexbox for a cleaner and more efficient layout.

#outerFields {
   background-color: blue;
   width: 70%;
   min-width: 320px;
   height: 350px;
}
#innerLabels, #innerFields {
   display: flex;
   align-items: center;
   width: 220px;
   height: 220px;
   border: 1px solid #333;
}
.innerLabel {
   display: flex;
   align-items: center;
   border: 1px solid #333;
   height: 130px;
   width: 85%;
}
.innerLabel div {
   display: table-cell; 
   vertical-align: middle;
   border: 1px solid #333;
}

<div id="outerFields">
     <div id="innerLabels">
        <div class="innerLabel"><div>world</div></div>
     </div>
</div>

Answer 4

Your outer field's display inline block is causing conflicts with other display elements. Allow me to propose a more effective solution. Instead of using tables, I have implemented flexbox for a cleaner and more efficient layout.

#outerFields {
   background-color: blue;
   width: 70%;
   min-width: 320px;
   height: 350px;
}
#innerLabels, #innerFields {
   display: flex;
   align-items: center;
   width: 220px;
   height: 220px;
   border: 1px solid #333;
}
.innerLabel {
   display: flex;
   align-items: center;
   border: 1px solid #333;
   height: 130px;
   width: 85%;
}
.innerLabel div {
   display: table-cell; 
   vertical-align: middle;
   border: 1px solid #333;
}

<div id="outerFields">
     <div id="innerLabels">
        <div class="innerLabel"><div>world</div></div>
     </div>
</div>

Answer 5

Answer №3

To successfully center a div using the display: table-cell property, certain conditions must be met:

<div id="x">
    <div id="y">
        <div id="z">Hello</div>
    </div>
</div>

The CSS code to achieve this is as follows:

body, html {
  height: 100%;
}

#x {
  display: table;
  width: 100%;
  height: 100%;
}

#y {
  display: table-cell;
  vertical-align: middle;
}

#z {
  margin: auto;
  text-align: center;
}

Make sure the html and body elements cover the entire document area if you want the x div to take up its full height.
When using display: table, the element's width no longer expands automatically, so setting width: 100% ensures it fills the available space.
To extend the element's height beyond its content, specify height: 100%.
Remember that for display: table-cell to work, there must be an ancestor with display: table - hence the nested structure in the HTML.
The vertical-align property centers the content vertically within the table-cell element.
Using margin: auto ensures proper alignment even if the content does not fill the parent's width completely.

Answer 6

To successfully center a div using the display: table-cell property, certain conditions must be met:

<div id="x">
    <div id="y">
        <div id="z">Hello</div>
    </div>
</div>

The CSS code to achieve this is as follows:

body, html {
  height: 100%;
}

#x {
  display: table;
  width: 100%;
  height: 100%;
}

#y {
  display: table-cell;
  vertical-align: middle;
}

#z {
  margin: auto;
  text-align: center;
}

Make sure the html and body elements cover the entire document area if you want the x div to take up its full height.
When using display: table, the element's width no longer expands automatically, so setting width: 100% ensures it fills the available space.
To extend the element's height beyond its content, specify height: 100%.
Remember that for display: table-cell to work, there must be an ancestor with display: table - hence the nested structure in the HTML.
The vertical-align property centers the content vertically within the table-cell element.
Using margin: auto ensures proper alignment even if the content does not fill the parent's width completely.

Achieve center alignment of a div within another div by utilizing the display property

Answer №1

Answer №2

Answer №3

Similar questions

As I continue to fill the child DIV element with more text, the shrink wrap is compromised and eventually breaks

My goal is to develop a table that is both able to be resized and easily repositioned

CKeditor does not accept special characters or diacritics in keywords

No translation or compiling of SCSS/SASS to CSS available

Set the element's text color to match the placeholder color specific to each browser

Having trouble with Github pages' responsiveness on certain devices

Scouring through the text to find a specific word and bring it to the forefront

Using HTML to position multiple lines of text alongside an image

Loop through multiple levels of elements using jQuery

Uploader and viewer tool for HTML5 documents

Mobile display exhibiting glitches in animation performance

Display the homepage if a user accesses a page intended for an ajax request

Struggling to fix the excess white space appearing underneath my website

Numerous column pictures that occupy the entire browser screen

How can I integrate material-ui with react-jsonschema-form?

What is the reason behind an inline element being able to have an explicit width when floating?

What's the best way to correct a word that is positioned at the bottom of a banner image?

Delete the HREF attribute after accessing the LINK

Learn how to create a horizontally scrollable ToggleButton using MUI when the ToggleButtonGroup exceeds the screen width

Painting with color blends