У меня есть элемент canvas внутри элемента div. Размер холста может измениться, и я хочу, чтобы он был вертикально по центру. Я использую этот подход CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vertical Centering</title>
<style>
html,
body{
height:100%;
width:100%;
margin:0;
padding:0;
}
#container{
width:100%;
height:100%;
text-align:center;
font-size:0;
background:#aae;
}
#container:before{
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
}
canvas{
width:400px;
height:300px;
display:inline-block;
vertical-align:middle;
background:#fff;
}
</style>
</head>
<body>
<div id="container">
<canvas></canvas>
</div>
</body>
</html>
Вы можете видеть, как он работает над этой скриптой: http://jsfiddle.net/8FPxN/
Этот код отлично подходит для меня, пока браузер не изменится под шириной холста. Виртуальный элемент, определяемый селектором :before, стоит в первой строке, а холст попадает во вторую строку. Я пытаюсь держать их в руках, избегая разрыва строки, и показывая полосы прокрутки, когда это необходимо. Добавление правила overflow:auto в контейнер показывает полосы прокрутки, но линия продолжает ломаться.
Размер холста может измениться, поэтому подход top:50%; margin-top:- ($canvas_height / 2); не подходит для этого. Ну, это может быть, но я предпочитаю не контролировать margin-top с помощью JavaScript. Просто CSS будет замечательным.
Любые идеи? Спасибо!
