时间戳

首页 > 解决方案 > 在页面上水平和垂直对齐 div 组

html - 在页面上水平和垂直对齐 div 组

问题描述

我有一个简单的网页，它在几个 div 中显示当前日期和时间以及 4 个带有名称和值的参数。

现在我的尝试看起来像这样：

.outer {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.inner {
    border: 1px solid black;
    width: auto;
    padding: 5px;
}

#output {
 font-size: larger;
 display: flex;
 justify-content: center;
 align-items: center;
 color: blue;
 padding: 5px;
}
<div id="output">Today: current DateTime value</div>
<div class="outer">
  <div class="inner">Parameter 1:</div>
  <div class="inner" id="N">par 1 value</div>
  <div class="inner">Parameter 2:</div>
  <div class="inner" id="V">par 2 value</div>
</div>
<div class="outer">
  <div class="inner">Parameter 3:</div>
  <div class="inner" id="D">par 3 value</div>
  <div class="inner">Parameter 4:</div>
  <div class="inner" id="T">par 4 value</div>
</div>
JSFiddle 示例。

如何在页面上水平和垂直对齐这个“表格”，因为这个页面将显示在大屏幕上（可能是电视）？

标签： htmlcsslayoutflexboxalignment

解决方案

我希望这会以某种方式帮助你

.outer {
  
    display: flex;
    width: 100%;
}

.main-div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    }

.inner {
    border: 1px solid black;
    width: auto;
    padding: 5px;
    flex: 1;
}

#output {
 font-size: larger;
 display: flex;
 justify-content: center;
 align-items: center;
 color: blue;
 padding: 5px;
}
<div id="output">Today: current DateTime value</div>
<div class="main-div">
<div class="outer">
  <div class="inner">Parameter 1 sd sdf sdf 34 43 ewr  :</div>
  <div class="inner" id="N">par 1 value</div>
  <div class="inner">Parameter 2:</div>
  <div class="inner" id="V">par 2 value</div>
</div>
<div class="outer">
  <div class="inner">Parameter 3:</div>
  <div class="inner" id="D">par 3 value</div>
  <div class="inner">Parameter 4:</div>
  <div class="inner" id="T">par 4 value</div>
</div>
</div>

推荐阅读