[HTML][CSS] jak wyśrodkować div wewnątrz div Opcje

[krzychu0808]

Mam pytanie mam np:

[HTML] pobierz, plaintext 
<div class="x">
<div class="wysrodkowac">
</div>
</div>
[HTML] pobierz, plaintext 

Jak napisać css dla tego wewnątrz aby był wyśrodkowany w tym divie....

[antyqjon]

Nadać konkretną szerokość, a potem margin: 0 auto;

[no_face]

Mozesz zrobic to na takiej zasadzie, dodatkowo wysrodokowuje div'a w pionie.

[HTML] pobierz, plaintext 
<div class="x"><div class="xx">tresc</div></div>
[HTML] pobierz, plaintext 

Kod

.x
{
    display: table;
    width: 70%;
    margin: auto;
}

.xx
{
    display: table-cell;
    vertical-align: middle;
    padding: 8px 20px 8px 20px;
    text-align: center;
}

[kavka]

[HTML] pobierz, plaintext 
.x {
border: 1px solid red;
height: 300px;
}
 
.wysrodkowac {
border: 1px solid green;
width: 500px;
height: 300px;
margin: 0px auto;
}
[HTML] pobierz, plaintext 

Te border'y i 'height' to tylko pomocnicze. Ważne jest 'margin' i 'width'

Ten post edytował kavka 3.08.2008, 11:31:51

[oomaster]

Jest łatwiejsze rozwiązanie (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

Kod

<div class="cen">
<div class="sro">
Mój portal
</div></div>

Kod

div.cen {text-align: center;}
div.sro {width: 950px; margin: 0 auto; text-align: left;}

Musisz tylko ustawić jaka będzie szerokość strony np. 950px lub 750px (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) i samo się robi czyli masz stronę wyśrodkowaną. Dodatkowo jest to w standardzie i działa we wszystkich popularnych przeglądarkach: IE, FF, Opera, Safari itd.

Ten post edytował oomaster 3.08.2008, 12:11:28

[krzychu0808]

kurde mam problem bo w IE 6.0 mi wyśrodkowuje a w FF nie działa mam coś takiego:

[PHP] pobierz, plaintext 
<?php
<div id="tresc2">
<div class="tresc4">
<div style="margin:0 auto; width:400px; vertical-align: middle;">
<table width="400px" border="0" align="center" cellpadding=0 cellspacing=0>
.............................................................
</table>
</div>
</div>
</div>
?>
[PHP] pobierz, plaintext 

CSS:

[HTML] pobierz, plaintext 
#tresc2 {
margin : auto;
padding : 0px;
width : 788px;
float : left;
background : url(images/2_03.jpg)
}
 
.tresc4 {
float : left;
font-family: tahoma;
font-size: 11px;
color: #000000;
margin-top: 10px;
margin-left: 30px;
margin-right: 30px;
display: inline;
}
[HTML] pobierz, plaintext 

nie patrzcie na mieszanie style i class bo to i tak później wrzucę do style.css

[oomaster]

Zastosuje moje rozwiązanie działa wszędzie to nie boli (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)
A pozatym może byś użył echo""; jeśli rozpoczynasz kod php (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif) bo tak daleko nie zajedziesz

Kod

<div class="cen">
<div class="sro">
<div class="next">
tresc i tableki i inne....
</div>
</div>
</div>

Kod

div.cen {text-align: center;}
div.sro {width: 400px; margin: 0 auto; text-align: left;}
div.next {background : url(images/2_03.jpg); font-family: tahoma;
font-size: 11px; color: #000000; margin-top: 10px; margin-left: 30px; margin-right: 30px; display: inline;}

Najlepiej nigdy nie kombinuj z div.cen, div.sro je zostałw takiej postaci jakiej są oczywiście width możesz zmieniać i potem dodasz kolejnego diva i tam sobie wszystko ustawisz (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) a tło możesz w body ustawiać

Ten post edytował oomaster 3.08.2008, 12:55:29

[kavka]

nie mieszaj za bardzo kiedy możesz skorzystać z prostszych rozwiązań, które tu podaliśmy

[oomaster]

OK nie kłućmy się ale zwrócę uwagę ,że moje rozwiązanie jest krótsze bez żadnych % i innych kombinacji np. height