Как центрировать текст из div из div - PullRequest
Новая
       34

Как центрировать текст из div из div

0 голосов
/ 03 марта 2019

У меня такая ситуация: 

<div id="main">
    <div id="my-items">
        <div class=m id="id1">
            Smth here(1)
        </div>

        <div class=m id="id2">
            Smth here(2)
        </div>

        <div class=m id="id3">
            Smth here(2)
        </div>
        ...
    </div>
</div>

У меня есть неопределенное количество элементов div (дочерний элемент div (дочерний элемент div))
Я хочу выровнять текст по вертикали (в его div (первыйтекст - # id1, второй текст - # id2 ...))!Я пытался использовать vertical-align: middle;.Пожалуйста, создайте пример jsfiddle или codepen!

CSS: 

.m{
height:32px;
width:90px;
text-align: center;
}
#my-items{
max-height:400px;
width:90px;
text-align:center;
}

Я создал очень простую схему 3D

Ответы [ 2 ]

0 голосов
/ 03 марта 2019

Попробуйте это в стиле # my-items 

position: absolute;
top: 50%;
0 голосов
/ 03 марта 2019

Я старался максимально соответствовать изображению.Надеюсь, вы можете взять код и изменить его по мере необходимости.Если это не то решение, которое вы искали, я прошу прощения.

PS Я добавил комментарий в css, чтобы показать вам один способ вертикального позиционирования контента.

#my-items{
  padding: 10px;
  border: 3px solid black;
  max-height: 400px;
  width: 90px;
  text-align: center;
}

.m{
  height:32px;
  width: 100%;
  text-align: center;
  border: 3px solid black;
  
  /* This is one way of vertially aligning content */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
<div id="main">
  <div id="my-items">
      <div class=m id="id1">
          Smth here(1)
      </div>

      <div class=m id="id2">
          Smth here(2)
      </div>

      <div class=m id="id3">
          Smth here(2)
      </div>
  </div>
</div>
...