Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Wyśrodkowanie div
Forum PHP.pl > Forum > Przedszkole
xlinksysx
Jak wyśrodkować div, żeby było to poprawnie zrobione i w każdej przeglądarce działało?

Kiedyś robiłem to prymitywnymi sposobami i w niektórych przeglądarkach się sypało.

Mam:

  1. <div class="strona">
  2.  
  3. jakaś tam treść...
  4.  
  5. <div class="przycisk">Przycisk</div>
  6.  
  7. </div>


I chciałbym właśnie mój przycisk wyśrodkować, jak to zrobić?
abort
w ogólności powinno zadziałać dodanie do pliku css:
  1. .przycisk {
  2. margin 0 auto;
  3. }
Szymciosek
W poziomie:
Kod
#przycisk {
width: 50px;
height: 50px;
margin: 0 auto;
}


Przejrzyj moje ostatnie tematy, też pytałem o coś podobnego i dostałem kilka odpowiedzi na poziome i pionowe wyśrodkowanie.
xlinksysx
Tylko 2 przyciski na wszystkich podstronach będą wyśrodkowywane, więc nie dopisuje tego do pliku CSS, robię to w ten sposób:

  1. <div class="przycisk" style="margin: 0 auto;">Przycisk</div>


Niestety nie działa.

Oczywiście chodzi mi o wyśrodkowanie w poziomie.
Arcioch
Dodaj jeszcze jakiś width do tego przycisku wink.gif To że będą tylko dwa nie oznacza, że nie powinieneś dopisać tego do zewnetrznego arkuszu css smile.gif
abort
Cytat(xlinksysx @ 4.10.2012, 18:44:36 ) *
Tylko 2 przyciski na wszystkich podstronach będą wyśrodkowywane, więc nie dopisuje tego do pliku CSS

Taka uwaga na boku: mimo wszystko unikaj inline css - jest to mimo wszystko coś, co zapobiega rozdzieleniu treści (plik html) od formy (plik css). Lepiej sobie stwórz nową klasę na wyśrodkowane przyciski, np. ".przycisk_centr" i styluj w CSS.
A wracając do problemu: możesz zaprezentować kawałek kodu html?
xlinksysx
A jeżeli width nie jest stały, bo zależy od długości tekstu na przycisku, to co wtedy?


Edit:

Podałem kod z głowy, przykładowy. Oto jak mam naprawdę:

  1. <div id="description">
  2. <div class="eight columns">
  3. <div class="description bottom">
  4. <h1>Rejestracja</h1>
  5. <h2>Nie posiadasz jeszcze konta? Utwórz konto zupełnie za darmo!</h2><br/>
  6. <div class="four columns alpha"><a href="index.php?a=newacc" class="link">Załóż nowe konto</a></div>
  7. </div>
  8. </div>
  9. </div>

Czyli jak wyśrodkować four columns alpha względem description bottom?
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.