Forum PHP.pl > [HTML][CSS] jak wyśrodkować div wewnątrz div

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML][CSS] jak wyśrodkować div wewnątrz div

krzychu0808

3.08.2008, 11:09:38

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

3.08.2008, 11:26:47

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

no_face

3.08.2008, 11:28:48

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

3.08.2008, 11:30:11

[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'

oomaster

3.08.2008, 12:10:06

Jest łatwiejsze rozwiązanie

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

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.

krzychu0808

3.08.2008, 12:31:38

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

3.08.2008, 12:53:22

Zastosuje moje rozwiązanie działa wszędzie to nie boli

A pozatym może byś użył echo""; jeśli rozpoczynasz kod php

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

a tło możesz w body ustawiać

kavka

3.08.2008, 13:17:47

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

oomaster

3.08.2008, 14:04:19

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

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.