-1

the css align-content property does not work with block containers for example

<html>
  <body>
    <div class="container">
      <div class="item">this is item</div>
    </div>
  </body>
</html>

css code

.container{
  background-color:yellow;
  width:350px;
  height:200px;
  align-content:center;

}
.item{
  width:100px;
  background-color:gray;
}

edit my code on jsfiddle

snapshot of css box alignment module description

enter image description here

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
stacki
  • 11
  • 4

1 Answers1

1

without display: flex, align-items and justify-content wont' work.

.container{
  background-color:yellow;
  width:350px;
  height:200px;
  display: flex; /* without display: flex, align-items and justify-content wont' work */
  align-items: center; /* to vertically center the content */
  justify-content: center; /* to horizontally center the content */
}
.item{
  width:100px;
  background-color:gray;
}
<div class="container">
  <div class="item">this is item</div>
</div>
Rafee Shaik
  • 681
  • 4
  • 10