[ANSWERED] html – How do I center an image in flexbox?

Question 1

You need to add display: flex, align-items: center and justify-content: center to the parent of the green box (.innerDiv1), not to the green box (.innerDiv3) itself:

.body {
  display: flex;
  width: 250px;
  height: 250px;
  background-color: blue;
  padding: 10px;
}

.innerDiv1 {
  flex: 1;
  background-color:red;
  /* HERE   */
  display: flex;
  align-items: center;
  justify-content: center;
}

.innerDiv2 {
  flex: 1;
  background-color: yellow;
}

.innerDiv3 {
  width: 50px;
  height: 50px;
  background-color: green;
}

<div class="body">
  <div class="innerDiv1">
    <div class="innerDiv3">
    </div>
  </div>

  <div class="innerDiv2"></div>
</div>

Alternatively, you could add display: flex to the parent (.innerDiv1) and align-self: center + margin: 0 auto to the green box (.innerDiv3):

.body {
  display: flex;
  width: 250px;
  height: 250px;
  background-color: blue;
  padding: 10px;
}

.innerDiv1 {
  flex: 1;
  background-color:red;
  /* AND HERE   */
  display: flex;
}

.innerDiv2 {
  flex: 1;
  background-color: yellow;
}

.innerDiv3 {
  width: 50px;
  height: 50px;
  background-color: green;
  /* AND HERE   */
  align-self: center;
  margin: 0 auto;
}

<div class="body">
  <div class="innerDiv1">
    <div class="innerDiv3">
    </div>
  </div>

  <div class="innerDiv2"></div>
</div>

Question 2

You have to apply display:flex to the parent and the justify-content and align-items need to be set on the parent as well

You can have a look at some more details regarding the alignment here: Align Items in Flexbox

.body{
  display: flex;
  flex: 1;
  width: 250px;
  height: 250px;
  background-color: blue;
  padding: 10px;
}
.innerDiv1{
  flex: 1;
  background-color:red;
  display: flex;
  align-items: center;
  justify-content: center;
}
.innerDiv2{
  flex: 1;
  background-color: yellow;
}
.innerDiv3{
  width: 50px;
  height: 50px;
  background-color: green;
}

<div class = "body">
 <div class = "innerDiv1">
   <div class = "innerDiv3">
   </div>
 </div>
 <div class = "innerDiv2">
 </div>
</div>

Question 3

You should align the green div in the red div instead, i.e to centre a child element in its parent, you should align the content of the parent div instead of the child div (in your case) by adding align-items: center; and justify-content: center; to the red div as so:

.body{
 display: flex;
 flex: 1;
 width: 250px;
 height: 250px;
 background-color: blue;
 padding: 10px;
}
.innerDiv1{
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    background-color: red;
}
.innerDiv2{
 flex: 1;
 background-color: yellow;
}
.innerDiv3{
 width: 50px;
 height: 50px;
 background-color: green;
 
}

<div class = "body">
 <div class = "innerDiv1">
   <div class = "innerDiv3">
   </div>
 </div>
 <div class = "innerDiv2">
 </div>
</div>

Question 4

How do I center an image in flex box? I tried using justify-content and align-items to center but it didnt work.

In the code down below, i set my to a green box. I want to center the green box within the red box. Any help?

.body{
 display: flex;
 flex: 1;
 width: 250px;
 height: 250px;
 background-color: blue;
 padding: 10px;
}
.innerDiv1{
 flex: 1;
  background-color:red;
}
.innerDiv2{
 flex: 1;
 background-color: yellow;
}
.innerDiv3{
flex: 1;
 width: 50px;
 height: 50px;
 background-color: green;
 align-items: center; /*does not work*/
 justify-content: flex-end; /*does not work*/
 
}

<div class = "body">
 <div class = "innerDiv1">
   <div class = "innerDiv3">
   </div>
 </div>
 <div class = "innerDiv2">
 </div>
</div>

Bollate

[ANSWERED] html – How do I center an image in flexbox?

By

Solution 1 :

Solution 2 :

Solution 3 :

Problem :

By

Related Post

[ANSWERED] How do you add a background image in the margins and top of the page behind the body? (Html, Css)

[ANSWERED] html – I can’t get my carousel buttons to respond bootstrap 4

[ANSWERED] javascript – Locomotive Scroll not working with Vue.js when having to load images on page

Leave a Reply Cancel reply

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate