logo
Tags down

shadow

align divs inside div


By : Cody Patnaude
Date : May 03 2020, 07:26 AM

I'm trying to create front end in angular based on a design given.

My design looks like the following design:

div align


My html code like :


 <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 maked looks like enter image description here

I need to align my divs to center within a div, but its not happening. I have seen other posts and tried several things like css  display:flex, align:center, and many others, but I was not able to make it look like design. Can some one help me to fix this issue !

Best Regards

Answer :

Here check out this code :

https://codepen.io/Cleee/pen/mdbOOKZ

I use float for the columns and the flexbox for centering the content inside the boxes. and also Added a few container wrapper. But you just had do define the width and the height of the elements. I used absolute values. You can use relative values like percent for responsive layouts.

Hope this will helps you :.


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 {}


Share : facebook icon twitter icon
Related Posts Related Posts :
  • clear array after form submit
  • pass url variable to javascript
  • access data using api
  • div position fixed css
  • add horizontal line between two div
  • disable toggle button css
  • css fixed line height
  • background image not working
  • table cell border
  • text line break css
  • overlay div on div
  • text direction rtl css
  • javascript convert string to an object
  • bind inner div click to outer div
  • jquery ajax oncomplete
  • how to use promise in for loop
  • jquery get element using variable
  • javascript send textbox value
  • pass div class content to another class or id
  • css new line after element
  • css calc not working properly
  • link disabled jquery
  • sql join table to subquery
  • MS Access SQL Issue with OR AND Operators
  • set textarea value using php
  • php merge two arrays into one
  • php form with google captcha
  • update current row in php
  • php date format mysql
  • mysql pdo select query
  • php function return an array
  • PHP mysqldump database to sql file
  • display image query
  • php create array using foreach loop
  • associative array php
  • group_concat in mysql laravel
  • php array_push empty
  • mysql on update cascade not working
  • pdo insert prepared statement
  • mysql insert ignore vs on duplicate key
  • mysql insert into existing row
  • mysql multi insert query
  • mysql group by show all rows
  • php change profile image
  • combine multiple arrays into one array php
  • how to sum values in an array
  • how to get sum of the total time
  • How to Create Facebook live stream without notification using API ?
  • on button click make div visible
  • css affect another element on hover
  • shadow
    Privacy Policy - Terms - Contact Us © bighow.org