Вертикально выровнять средний выпуск

Question

Вертикально выровнять средний выпуск

0

здесь родительский div подобен этому

.div parent{
width:100%;
height:100%;
text-align:center;
}
.div child{
width:10%;
height:10%;
}

В чувствительных мобильных устройствах для мобильных устройств дочерний div не выравнивается по вертикали, как можно выравнивать середину? пожалуйста помогите..

Благодарю.

Anil Vinayak 18 дек. 2013, в 10:55

Источник

2

Можете ли вы дать JS скрипку вашей проблемы?
Maxime Lorant 18 дек. 2013, в 09:30
0

Выравнивание по вертикали сложно с divs. Если вам это сойдет с рук, можете ли вы положить его в стол? вертикальное выравнивание легко со столом.
man 18 дек. 2013, в 09:31

Теги:

html

css

5 ответов

Ещё вопросы

Можете ли вы дать JS скрипку вашей проблемы?
Выравнивание по вертикали сложно с divs. Если вам это сойдет с рук, можете ли вы положить его в стол? вертикальное выравнивание легко со столом.

Era · Answer 1 · 2013-12-18T06-45-00.000Z

Попробуйте добавить:

.div parent{
vertical-align: middle;
width:100%;
height:100%;
text-align:center;
}

Daut · Answer 2 · 2016-09-09T07-03-00.000Z

Очень простое решение, которое я использовал много раз.

.a {
  width: 300px;
  height: 300px;
  background-color:#666;
}

.b {
  margin:auto;
  width: 75px;
  height: 100px;
  top: calc(50% - 50px);
  text-align:middle;
  position: relative;
  background-color:#111;
}

<div class='a'>
  <div class='b'>
  </div>
</div>

Kfir Erez · Answer 3 · 2016-08-10T03-22-00.000Z

Я знаю, что этот пост старый, но вот еще один подход с Flex (также доступен в CodePen - http://codepen.io/KErez/pen/kXzYAj):

HTML:

<div class='a'>
  <div class='b'>
    Inner
  </div>
</div>

CSS (цвета только для четкого отображения ящиков):

.a {
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #ffffff;
  background-color: #223344;
  width: 100%;
  height: 100%;
}

.b {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 75px;
  height: 100px;
  background-color: #999999;
  color: #00ff00;
}

Prasanth K C · Answer 4 · 2013-12-18T06-55-00.000Z

Вы написали .div parent похоже, недействительный селектор. Если вы пытаетесь выбрать div с parent класса, его следует выбрать с помощью div.parent (То же, что и для вашего дочернего div).

Попробуй это;

Применить diplay:table-cell; to .parent div, чтобы получить возможность выровнять его дочерний .parent вертикали.

затем примените vertical-align:middle к тому же, чтобы дочерние элементы были вертикально средними

div.parent{
  width:100%;
  height:100%;
  text-align:center;
  display:table-cell;
  vertical-align:middle;
}

SW4 · Answer 5 · 2013-12-18T06-42-00.000Z

FIDDLE

Это альтернативный вариант, используя таблицы CSS

HTML

<div class='table'>
    <div class='row'>
        <div class='cell'>
            <div>Child</div>
        </div>
    </div>
</div>

CSS

html, body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
.table {
    display:table;
    table-layout:fixed;
    width:100%;
    height:100%;
}
.row {
    display:table-row;
}
.cell {
    display:table-cell;
    border:1px solid grey;
    vertical-align:middle;
    text-align:center;
}
.cell div {
    background:red;
    display:inline-block;
    margin:0 auto;
}