0

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

Пример на JSFiddle

  1. Как выровнять текст по центру по горизонтали и вертикали ?
  2. Как сделать так, чтобы при добавлении текста блоки не съезжали?
5
  • по горизонтали и вертикали относительно чего?
    – onmotion
    30 апр 2017 в 17:42
  • @onmotion, div-блока "tile" 30 апр 2017 в 17:43
  • Все блоки должны быть выровнены, образовывать ровную сетку?
    – onmotion
    30 апр 2017 в 17:50
  • @onmotion, Да, всё верно. А текст, который будет внутри этих блоков не должен вызывать смещения этих же блоков. 30 апр 2017 в 17:52
  • jsfiddle.net/onmotion/3rn061de правда ответ уже дали альтернативный
    – onmotion
    30 апр 2017 в 17:56

2 ответа 2

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>

1
  • Спасибо! ...... 30 апр 2017 в 17:53
0

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;
}
1
  • .......Спасибо! 30 апр 2017 в 18:31

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.