Выровнять группу divs по горизонтали и вертикали на странице - PullRequest
Новая
       33

Выровнять группу divs по горизонтали и вертикали на странице

0 голосов
/ 21 февраля 2019

У меня есть простая веб-страница, которая показывает текущую дату и время и 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 .

Как выровнять по горизонтали и вертикали эту «таблицу» на странице, поскольку эта страница будет отображаться на большом экране (можетбыть телевизором)?

1 Ответ

0 голосов
/ 21 февраля 2019

Надеюсь, это вам как-то поможет 

.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>
...