时间戳

首页 > 解决方案 > 在 div 中对齐 div

html - 在 div 中对齐 div

问题描述

我正在尝试根据给定的设计以角度创建前端。我的设计看起来像

在此处输入图像描述

我的代码

.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);
}

我开发的看起来像 在此处输入图像描述

我正在尝试将我的 div 对齐到 div 内的中心，但它没有发生。我看过其他帖子并尝试了一些东西，例如 display:flex、align:center 和许多其他东西，但我无法让它看起来像设计。有人可以帮我弄这个吗。

标签： htmlcssangularfrontend

解决方案

在这里检查一下。

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

我使用 float 作为列，使用 flexbox 将框内的内容居中。还添加了一些容器包装器。但是您只需要定义元素的宽度和高度。我使用了绝对值。您还可以将百分比等相对值用于响应式布局。

希望这可以帮助。


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

推荐阅读