Как я могу сделать мой текст и первый div выровненным по вертикали? - PullRequest
Новая
       20

Как я могу сделать мой текст и первый div выровненным по вертикали?

0 голосов
/ 08 февраля 2020

Так что я делаю этот код для обучения, но я не могу найти способ выровнять мой текст с моим блоком div. Также код, который я также пытаюсь сделать div, который содержит все остальное, выровнять по вертикали со страницей. 

body{
  background-color: black;
}

.box{
  border-style: solid;
  width: 240px;
  height: 240px;
  margin: auto;
}

.boxInside{
  border-style: solid;
  width: 90%;
  height: 90%;
  margin: auto;
  padding: 0px;

/*   align a div vertically within its parent element */
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

p{
  text-align: center;
}
<div class="box" style="background-color: white;">  
  <div class="boxInside" style="background-color: gray;">
    <div class="boxInside" style="background-color: white;">
      <div class="boxInside" style="background-color: gray;">
        <div class="boxInside" style="background-color: white;">
          <div class="boxInside" style="background-color: gray;">
            <div class="boxInside" style="background-color: white;">
              <div class="boxInside" style="background-color: gray;">
                <div class="boxInside" style="background-color: white;">
                  <div class="boxInside" style="background-color: gray;">
                    <div style="">
                      <p>Testing Display</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

1 Ответ

0 голосов
/ 08 февраля 2020

Всегда используйте css flex ИЛИ grid свойство. 

body{
  background-color: black;
}
/* I used flex property */
.box{
  border-style: solid;
  width: 240px;
  height: 240px;
  margin: auto;
  display: flex;
  justify-content:center;
  align-items:center;
}

.boxInside{
  background-color:blue;
  padding:9px;
}
.boxInside > p{
  text-align:center;
}
<div class="box" style="background-color: white;">  
  <div class="boxInside" style="background-color: gray;">
    <div class="boxInside" style="background-color: white;">
      <div class="boxInside" style="background-color: gray;">
        <div class="boxInside" style="background-color: white;">
          <div class="boxInside" style="background-color: gray;">
            <div class="boxInside" style="background-color: white;">
              <div class="boxInside" style="background-color: gray;">
                <div class="boxInside" style="background-color: white;">
                  <div class="boxInside" style="background-color: gray;">
                  <!--small change here -->
                  <!--common class added here-->
                    <div class="boxInside">
                      <p>Testing Display</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Примечание: Если вы хотите создать глубокую иллюзию, переключите отступ с px на %.

...