CODEWITHSUNDEEP
htmlcss
x89
x89

Reputation: 3460

place second object below the first one

There are two components on my screen.The first one is the image while the second consists of the grid and chart below. I want to center the image such that it is horizontally at the center and is above the second component. The second component should be below the image, not on its right. How can I do so?

I tried padding-top and align-self but these dont seem to work for me.

enter image description here

return(
    <div>
    <main className='content'>
    <img src={poly} alt="charts" className="charts" />
      <div className="popup">
  <Popup/> 
  </div >
  <div className="regressionSetup">
    <RegressionItemsContainer/>
    </div>
      </main>
    </div>
);

.content{
    padding-left: 260px;
    padding-top: 100px;
    display: flex;
}

.popup{
    padding-bottom: 20px;
}

.charts{
    align-self: center;

}

.regressionSetup{
    padding-top: 300;
}

Upvotes: 0

Views: 43

Answers (2)

Evren
Evren

Reputation: 4410

Use flexbox for both div like this then it should work. You do not need paddings if you want to center them

.content{
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}
.imageOne{
  width: 100px;
  height: 100px;
}
.regressionSetup {
  display: flex;
  justify-content: center;
  align-items: center;
}
.imageSecond {
  width: 50%;
  height: 100px;
}
<div>
    <main class='content'>
    <img src="https://d2mvzyuse3lwjc.cloudfront.net/doc/en/UserGuide/images/Pie_Of_Pie_Chart/Pie_Of_Pie_Chart.png?v=83478" class="imageOne"/>
  <div class="regressionSetup">
    <img src="https://d2mvzyuse3lwjc.cloudfront.net/doc/en/UserGuide/images/Pie_Of_Pie_Chart/Pie_Of_Pie_Chart.png?v=83478" class="imageSecond"/>
    </div>
      </main>
</div>

Upvotes: 0

Juan Araneta
Juan Araneta

Reputation: 335

You could took advantage of flex display. when you have two or more elements and want to show them in the same column and horizontally centered just place those items inside a div and add display:flex;flex-direction:column;align-items:center;.

.root {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.set-of-iamges {
  width: 130px;
  height: 130px;
  background-color: red;
  margin-bottom: 50px;
}

.charts {
  width: 130px;
  height: 130px;
  background-color: blue;
  color: white;
}
<div class="root">
<div class="set-of-iamges">Set of images</div>
<div class="charts">chart</div>
</div>

Upvotes: 2

Related Questions