По вертикали и по горизонтали в центре

Вертикальное и горизонтальное центрирование может быть одним из самых неприятных для компоновки страницы.
Несмотря на то, что найдено много решений See This и This, я не вижу ни одной из этих проблем.
Моя проблема показана здесь JSFiddle.По вертикали и по горизонтали в центре

Я пробовал это для вертикального, и он не работал. Любой другой для вертикали?

out { 
    display: table; 
} 

in { 
    display: table-cell; 
    vertical-align :middle; 
}

источник

2013-07-29 Andrew Liu

Я не понимаю вашу скрипку. Ничто не соответствует «out» или «in». – FlavorScape

не волнуйтесь по поводу кода на странице, Fiddle описывает вопрос @ FlavorScape –

это не имеет никакого смысла. кнопка находится за пределами таблицы. – FlavorScape

Если вы хотите что-то центрирование по вертикали и по горизонтали, here является jsFiddle.

#cdiv { 
    background-color: #FFFF00; 
    color: #000000; 
    width: 300px; 
    height: 200px; 
    display: none; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    margin: -100px 0 0 -150px; 
}

Решение взяты из: Tutorialzine

источник

2013-07-30 01:00:50

вещь, которую вы действительно не знаете высоту таблицы, она всегда будет изменена. –

Тогда, возможно, javascript, который получает высоту стола и регулирует соответствие Свойство CSS динамически является решением. –

Я выровнены свою кнопку горизонтально, добавив

margin-right:33%; 
margin-left:33%;

Теперь о вашем столе, я позиционируют его по отношению к DIV и дал ему топ 50%.

EXAMPLE FIDDLE

Edit: другой способ расположить таблицу в DIV, чтобы дать ему поля (сверху, справа, слева) для того, чтобы расположить его лучше.

Надеется, что это помогает

источник

2013-07-30 00:08:25 Thanos

Даже мысль о том, что горизонтальная, кажется, жестко кодируется, работает. Но вертикальная не меняется, поскольку высота таблицы будет изменена. –

это будет центр любой DIV как по вертикали, так и по горизонтали в данной области. Это потребует некоторой математики с вашей стороны, чтобы все было в порядке. Вот CodePen: http://codepen.io/anon/pen/xbzgyO

HTML:

<div id="mydiv"> 
<!--Content you want centered goes here--> 
</div>

CSS:

#mydiv { 
    position:absolute; 
    top: 50%; 
    left: 50%; 
    width:30em; 
    height:30em; 
    margin-top: -9em; /*set to a negative number 1/2 of your height*/ 
    margin-left: -9em; /*set to a negative number 1/2 of your width*/ 
    background-color:#222126; 
}

Надеется, что это помогает!

источник

2015-02-27 00:53:32

По вертикали и по горизонтали в центре

ответ

Смежные вопросы