MarMan29 MarMan29 - 5 months ago 9
CSS Question

Centre div inside div using display: table

I have the following:



#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 can't work out why the inner most div isn't being centred? I did look at some of the answers here regarding centring however I can't see what the problem is...enter image description here

I want the hello to be centred vertically to the centre but not horizontally. All other divs are positioned how I want them. There is no error in the other divs they are positioned side by side for a reason. The only change I want is the hello div moved vertically to the centre

Answer

You are just overiding your inner div with

#outterFields div {
    display: inline-block;
}

Just remove it or if you where intending 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>

Comments