Aligning divs within a div [duplicate] - html

Question

This question already has answers here:
Prevent child div from overflowing parent div
(3 answers)
Closed 3 years ago.
I am trying to create front end in angular based on a design given. My design looks like
My code
.html
<div fxLayout="row" fxLayoutAlign="space-bewteen start" fxLayoutGap="12px" class="side_start">
<div fxFlex="12" class="second_bar">
Side
</div>
<div fxFlex="88" fxLayout="column" fxLayoutAlign="space-bewteen" fxLayoutGap="12px">
<div [ngClass]="['third_bar_1']">
<div fxLayout="row" fxLayoutAlign="space-bewteen start" >
<div fxFlex="7" class="zone">
Zone Thermal Comfort
</div>
<div fxFlex="5" class="temp">
<p>TEMP</p>
<p>37 deg</p>
</div>
<div fxFlex="5" class="hum">
<p>RH %</p>
<p>25</p>
</div>
<div fxFlex="7" class="comfort_index">
48
</div>
<div fxFlex="8" class="comfort_meter">
<img class="meter_img" src="../../assets/Temp Hot-01-01.png">
</div>
<div fxFlex = 7 class="energy_box">
ENERGY USAGE
</div>
<div fxFlex = 7 class="energy_reading">
30%
</div>
<div fxFlex="8" class="energy_meter">
<img src="../../assets/Energy Gauge 10-01.png" >
</div>
</div>
</div>
<div [ngClass]="['third_bar_2']">
second
</div>
</div>
</div>
.css
.second_bar{
background-color: #6390c3;
height: calc(100vh - 200px);
}
.third_bar_1{
border:1px solid red;
background-color: white;
height: 60px;
}
.zone {
display: flex;
align-items: center;
/* font-color: #5d6d88; */
background-color: #f1cd86;
text-align: center;
height: 71%;
}
.temp {
background-color: #73d9fa ;
text-align: center;
}
.hum{
background-color: #73fac5;
text-align: center;
}
.comfort_index{
text-align: center;
background-color: #f1cd86;
height: 71%;
}
.comfort_meter{
margin-left: 1.8%;
align-content: center;
vertical-align: middle;
}
.meter_img{
height: 100%;
width: 100%;
/* object-fit: contain; */
}
.energy_box{
margin-left: 27%;
background-color: #f1cd86;
}
.energy_reading{
background-color: #6390c3;
}
.energy_meter{
margin-left: 1.8%;
}
.third_bar_2{
border:1px solid red;
height: calc(100vh - 355px);
}
what i developed looks like
I am trying to align my divs to center within a div, but its not happening. I have seen other posts and tried several things like display:flex, align:center, many other things, but I was not able to make it look like design. Can some one help me with this.

Answer 1

Here check this out.
https://codepen.io/Cleee/pen/mdbOOKZ
I used float for the columns and the flexbox for centering the content inside the boxes. Added also a few container wrapper. But you just had do define the width and the height of the elements. I used absolute values. You also can use relative values like percent for responsive layouts.
Hope this helps.
body {
font-family:Roboto;
font-size:12px;
}
.zone, .comfort_index, .energy_box, .energy_reading {
display: flex;
align-items: center;
/* font-color: #5d6d88; */
background-color: #f1cd86;
text-align: center;
height: 71%;
justify-content:center;
}
.second_bar { width: 200px;
float:left;}
.contentWrapper {
width:calc(100% - 200px);
float:right;
}
.secondContentWrap {
border:1px solid #ff0000;
min-height:300px;
clear:both;
}
.zone, .comfort_index, .temp , .hum{
width:86px;
height:60px;
float:left;
}
.temp {}
.temp p, .hum p {
height:30px;
box-sizing:border-box;
margin:0;
display:flex;
align-items:center;
justify-content:center;
}
.temp p:nth-of-type(2), .hum p:nth-of-type(2) {
background-color:#639FE5;
color:#fff;
border-right:1px solid rgba(0,0,0,.15)
}
.hum {}
.hum p {}
.hum p:nth-of-type(2) {
border-left:1px solid rgba(0,0,0,.15);
border-right:0;
}
.comfort_index {}
.outterWrapperOne {
width:344px;
float:left;
}
.outterWrapperTwo {
float:left;
width: calc(100% - 344px)
}
.comfort_meter, .energy_box , .energy_reading, .energy_meter {
float:left;
height:60px;
}
.comfort_meter {
width:45px;
height;60px;
}
.comfort_meter img {
width:100%;
height:auto;
}
.energy_box {
margin-left:27%;
width:86px;
}
.energy_reading {
width:86px;
background-color: #6390c3;
color: #fff;
}
.energy_meter {}
.energy_meter img {}