Как выровнять по центру?

329
02 мая 2017, 04:24

Есть div блок и 4х4 div блока в нём.

Пример на JSFiddle

  1. Как выровнять текст по центру по горизонтали и вертикали ?
  2. Как сделать так, чтобы при добавлении текста блоки не съезжали?
Answer 1

1) .tile:before{content: ''; display: inline-block; vertical-align: middle;height:100%;}

2) .tile - vertical-align: top;

html, 
body { 
    padding: 0; 
    margin: 0; 
    background-color: rgb(238, 238, 240); 
} 
 
.main { 
    text-align: center; 
    margin: 3% auto; 
    width: 400px; 
    height: auto; 
    background-color: rgb(158, 158, 167); 
    padding: 10px; 
} 
 
.tile { 
    text-align: center; 
    justify-content: center; 
    width: 80px; 
    padding: 0px; 
    margin: 5px; 
    height: 80px; 
    background-color: #fff; 
    display: inline-block; 
    vertical-align: top; 
} 
 
.tile:before { 
    content: ''; 
    display: inline-block; 
    vertical-align: middle; 
    height: 100%; 
}
<div class="main"> 
 
    <div class="tile"></div> 
    <div class="tile"></div> 
    <div class="tile">something</div> 
    <div class="tile"></div> 
 
    <div class="tile"></div> 
    <div class="tile"></div> 
    <div class="tile"></div> 
    <div class="tile"></div> 
 
    <div class="tile">one more</div> 
    <div class="tile"></div> 
    <div class="tile"></div> 
    <div class="tile"></div> 
 
    <div class="tile"></div> 
    <div class="tile"></div> 
    <div class="tile"></div> 
    <div class="tile"></div> 
 
</div>

Answer 2

1) для того чтобы выровнять по центру можно воспользоваться двумя способами:

Первый (самый лучший) - воспользоваться flex

<div>
    <span>text</span>
</div>
div{
    display: flex;
    align-items: center;
    justify-content: center;
}

Второй: сделать блок ячейкой таблицы и добавить к нему стиль vertical-align и text-align

2) По поводу блоков

Добавьте это к main

.main {
    ...
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
READ ALSO
Не работает font-awesome из npm
HTML

Не работает font-awesome из npm

Поставил font-awesome так: npm install --save font-awesomeПосле этго пытаюсь получить картинку:

 293
JQuery поменять элементы местами
HTML

JQuery поменять элементы местами

Как можно менять местами блоки? Чтобы каждые 10 секунд последний блок вставал на место первого, второй на место третьего, третий на место последнегоИ...

 1004
Ввод в поле с помощью Js
HTML

Ввод в поле с помощью Js

Привет, тут такое дело, как с помощью js в поле вбивать допустим слово "Hello"?

 238
Event и delegate: в чем отличие?
c#

Event и delegate: в чем отличие?

Здравствуйте!

 363