Как сделать размер блока с учетом содержимого?

Question

[Vl001D]

У меня есть блок, размеры которого нужно задать относительно содержимого, а содержимое имеет абсолютную позицию.

HTML

<div class="footer fix-botoom">
    <div class="footer-col">
	    Контакты
    </div>
</div>

CSS

.footer {
  background-color: #f5f5f5;
  font-size: 10px;
  z-index: 1000;
}

.footer-col {
  text-align: left;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

Answer 1

[Алексей]

Не делать вложенный блок абсолютным. Либо получать его размеры через js и применять их для обертки

Comments

[Vl001D]

А можно как-то содержимое по центру выровнять?

[Алексей]

Vl001D, Для начала- зачем тогда вообще делать блок абсолютным? Просто используйте flex

[Vl001D]

Алексей, а если будет 3 колонки будет работать flex? (Мне нужно в футере создать 3 колонки, чтобы они были по центру, а не съезжали в сторону)

[Алексей]

Vl001D, Покажите пример того что вы ходите. Флексы работают с любым числом колонок, но иногда удобнее применять гриды

[Vl001D]

Алексей, у меня нет примера. Могу показать на картинке:

[Алексей]

Vl001D, И что тут нужно сделать?

[Vl001D]

Алексей, 3 блока размещается в футере, мне нужно сделать так, чтобы контент был по середине каждого блока, а не селва, сверху (text-align - тут не подходит).

[Vl001D]

Алексей, сейчас у меня получается такое расположение:

А нужно сделать так:

[Алексей]

Vl001D,

.block {
  display: flex;
  justify-content: center;
  align-items: center
}

Answer 2

[Kirill Makarov]

Absolute убираешь и все остальное тоже.
Display flex
Align-items center
Justify-content center