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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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