Как да го Центрирам

[NevarMore]

Пробвах се по всякакви начини да го центрирам и не става.... ! :X


[css]#Box{
display: none;
position:absolute;
background: #fbfbfb;
border: 2px solid #cecece;
width:300px;
height:300px;
z-index: 2;
top:0px;
left:auto;
}[/css]

Някой ако знае къде бъркам ....

 

[IvanAdamov]

http://jsfiddle.net/8K2kh/

 

[anonimen]

Той май иска да е центрирано вертикално - на картинката е центрирано вече хоризонтално.
http://jsfiddle.net/8K2kh/1/
Как работи? Слагаш отстъпи горе/ляво по 50%, после дива го връщаш малко наляво и нагоре - с половината от височината/ширината му.

 

[NevarMore]

http://jsfiddle.net/8K2kh/

Е много хубаво ама не става !!

 

[IvanAdamov]

Може, не се разбира много от обяснението и картинката

 

[anonimen]

Може, не се разбира много от обяснението и картинката

Ами обяснението и картинката си противоречат - от кода личи, че иска да го центрира хоризонтално, (top:0px; left:auto; ), но пък на картинката вече си е центрирано. Затова реших че има предвид вертикално.

 

[madmax_3]

Според мен най-лесния начин е този:

<style type="text/css">

table.container{
border-collapse: collapse;
width: 100%;
height: 100%;
}

table.container tr td{
text-align: center;
vertical-align: middle;
}

table.container .innerbox{
margin: 0 auto;
width: 300px;
background-color: red;
}

</style>


<table class="container">
<tr>
<td>

<div class="innerbox">Your text here ...</div>

</td>
</tr>
</table>

Работи безотказно при всякакви браузъри и резолюции

 

[IvanAdamov]

Според мен най-лесния начин е този:

<style type="text/css">

table.container{
border-collapse: collapse;
width: 100%;
height: 100%;
}

table.container tr td{
text-align: center;
vertical-align: middle;
}

table.container .innerbox{
margin: 0 auto;
width: 300px;
background-color: red;
}

</style>


<table class="container">
<tr>
<td>

<div class="innerbox">Your text here ...</div>

</td>
</tr>
</table>

Работи безотказно при всякакви браузъри и резолюции

TABLE?!?!

Стегни се малко, 2014 сме

 

[madmax_3]

Какъв е проблема след като работи ?

Предложи твоя вариант и ако е по-добър и работи, ще го ползвам.


И уточнявам - при всички резолюции и браузери.

 

[IvanAdamov]

Какъв е проблема след като работи ?

Предложи твоя вариант и ако е по-добър и работи, ще го ползвам.


И уточнявам - при всички резолюции и браузери.

http://jsfiddle.net/8K2kh/1/

 

[madmax_3]

А как ще стане ако не знаеш предварително височината на текст/div - a ?

Искам текста да ми е центриран винаги хоризонтално и вертикално, независимо от неговата дължина.

Иначе съм съгласен, че при фиксирана височина този начин е добър.

 

[anonimen]

А как ще стане ако не знаеш предварително височината на текст/div - a ?

Искам текста да ми е центриран винаги хоризонтално и вертикално, независимо от неговата дължина.

Иначе съм съгласен, че при фиксирана височина този начин е добър.

Най-малкото авторът има задени точните размери

Но все пак :
Тогава се ползва javascript, няма как да вземеш точната височина/ширина само с css:

var width = el.offsetWidth;
var height = el.offsetHeight;
el.style.marginTop = window.innerHeight / 2 - height / 2 + 'px';
el.style.marginLeft = window.innerWidth / 2 - width / 2 + 'px';

Разбира се, обектът трябва да е фиксирано/абсолютно позициониран.

http://jsfiddle.net/8K2kh/3/

 

[madmax_3]

Бах маму ... И всичко това само защото някой е казал, че да използваш таблица е лошо.