как я могу центрировать вложенный div

Question

как я могу центрировать вложенный div

0

Я пытаюсь центрировать вложенные div вертикально, чтобы создать простую математическую задачу (с фракциями), и я не уверен, как это сделать (без жесткого кодирования на основе родительской высоты)

что у меня до сих пор выглядит так:

Я пытаюсь div.plus знак плюса (div.plus)

HTML

<div class = "problem">
    <div class = "fraction">
        5
        <hr />
        6
    </div>
    <div class= plus>
        +
    </div>
    <div class = "fraction">
        5
        <hr />
        6
    </div>
</div>

CSS

.fraction{
    width: 15px;
    text-align: center;
}

.problem > *{
    float: left;
    margin: 10px;
}

играть на скрипке

Math chiller 17 дек. 2013, в 18:16

Источник

0

Также проверьте это, я нашел это очень полезным vanseodesign.com/css/vertical-centering .
Antonis Grigoriadis 17 дек. 2013, в 16:59

Теги:

html

css

centering

2 ответа

1

Другой способ - свойство display:table.

.problem{
     display:table;
}

.problem > *{
    padding:5px;
    display:table-cell;
    vertical-align:middle;
}

JSfiddle: http://jsfiddle.net/U3hfL/1/

Antonis Grigoriadis 17 дек. 2013, в 15:16

Ещё вопросы

Также проверьте это, я нашел это очень полезным vanseodesign.com/css/vertical-centering .

DaniP · Accepted Answer · 2013-12-17T14-28-00.000Z

Вы можете использовать inline-block вместо float:

.problem > *{
  display:inline-block;
  margin: 10px;
  vertical-align:middle;
}

Демо-версия http://jsfiddle.net/NT6d5/2/