Как да центрирам по този начин

anonymous12

Registered
Как мога да центрирам по този начин http://dichev.com/Style/Examples/007/center-example.html искам само вертикално центриране когато резолюцията е по-голяма хем отгоре да има разстояние хем отдолу,а при мен сега само отдолу е разстоянието колкото по-голяма резолюцията толкова по-голямо разстояние остава от footer-a ето главния див,който държи всичките дивове

.page_cont{
display:table;
width:100%;
height:100%;
}
 
Много зависи от структурата и останалия код, но като цяло може да ползваш това
Код:
#container {display:table;}
#middle{display:table-cell; vertical-align:middle;}
 
Пробвай както ти дадох за пример.
Иначе този цсс код не помага,трябва да се види демо някъде (онлайн) за да се прецени.
Все едно да ти дам съдържанието на една книга без реалния текст :)
 
anonymous12 каза:
В кой div да сложа тези кодове дето ми даде
Код:
#container {display:table;}
#middle{display:table-cell; vertical-align:middle;}
div id=Container ти е главния див
а div id=middle ти е дивът които ще е центриран спрямо главния див.
 
Код:
<style>
#container {
display:table;
width:100%;
height:100%;
border:1px solid;
width:300px;
margin-left:auto;
margin-right:auto;
}
#middle{display:table-cell; vertical-align:middle;text-align:center;}
</style>
<div id="container">

<div id="middle">Neshto tuka</div>

</div>
Демо
 
При мене е така сега както си дал на мен ми трябва да не отива нагоре когато резолюцията е голяма.Както тука си стои на едно място http://dichev.com/Style/Examples/007/center-example.html
 
Слагаш целия сайт в един див със id main_div
Код:
#main_div{
position: absolute;
top: 20%;
bottom: 20%;
left: 20%;
}

Код:
<div id="main_div">
TUKA CELIQ KOD
</div>
 
Така пък хептен не става бяга наляво

Edit: Направих това което искам,обаче целия сайт е свален надолу с няколко px как мога да го дигна нагоре с margin като дигна после като резолюцията е малка логото се крие,а аз не искам ето код

[css].page_cont_center{
position:absolute;
height:100%;
width:100%;
top:50%;
}[/css]
 
След доста четене в нета за този vertical-align се оказа,че има пролеми под някои браузъри,иначе щом така работи пробвай да смениш top/bottom %
 
Hous каза:
След доста четене в нета за този vertical-align се оказа,че има пролеми под някои браузъри,иначе щом така работи пробвай да смениш top/bottom %


Top, bottom може да се ползва. Може да се ползва и line-height, за вертикално центриране.
 
Успях да оправя проблема,ако някой има същия проблем да направи това

Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Vertical Centering</title>
<style type="text/css">
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
html {
display: table;
}
body {
display: table-cell;
vertical-align: middle;
}
.container {
width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container">
text
</div>
</body>
</html>
 

Back
Горе