Forum PHP.pl > [CSS] Jak wyrównać obrazek diva?

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS] Jak wyrównać obrazek diva?

Trolson

27.07.2012, 17:42:03

Jak wyrównać obrazek, który znajduje się w DIV'ie?
HTML

[PHP] pobierz, plaintext 
		<div id="homepage">
		<div class="game-column" id="home-game-wow">
		<a href="aa" class="game-promo" tabindex="2"><span class="game-tip">IRA: World of Warcraft</span></a>
		</div>
[PHP] pobierz, plaintext

CSS

[PHP] pobierz, plaintext 
/* game boxes */
 
#homepage .game-column { position: relative; float: center; width: 330px; padding-top: 425px; color: #787878; font-size: 11px; }
#homepage .game-column ul { text-transform: uppercase; }
#homepage .game-column li { padding: 15px 0; border-top: 1px solid #b3b0ac; }
#homepage .game-column li:first-child { border: none; }
#homepage .game-column li span { color: #505050; font-size: 18px; font-weight: bold; }
#homepage .game-column li span.text-green { color: #4a8432; }
#homepage .game-column li span.text-red { color: #944a4a; }
 
#homepage .game-promo { left: 6px; top: 170px; width: 319px; height: 500px; display: block; position: absolute; outline: none; border: none; text-align: right; padding: 0; font-size: 16px; -moz-box-shadow: 0 0 20px #000; -webkit-box-shadow: 0 0 10px #1e2023;  -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; }
#homepage .game-promo:hover,
#homepage .game-promo:focus { text-decoration: none; }
#homepage .game-promo span { padding-right: 35px; background: transparent url("images/promo-arrow.gif") 100% -3px no-repeat; }
#homepage .game-promo .game-tip { position:absolute; top:7px; padding: 5px 25px 5px 10px; width:270px; left: 7px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; color:#B2BAC7; }
#homepage .game-promo:hover .game-tip,
#homepage .game-promo:focus .game-tip { color: #fff; border-color: #007db0; background-position: 100% -41px }
 
 
#homepage #home-game-wow .game-promo { background: url("images/wow.png") 0 0 no-repeat; }
#homepage #home-game-wow .game-promo:hover,
#homepage #home-game-wow .game-promo:focus { background-position: -330px 0;}
 
 
[PHP] pobierz, plaintext

float: center nie działa, a więc nie mam pomysłów ;x

artekp999

27.07.2012, 21:37:21

Spróbuj jeszcze pokombinować coś z margin lub padding.

thek

27.07.2012, 22:35:05

Od kiedy float ma wartość center? Ja słyszałem o text-align:center jedynie. Ale jeśli to nie działa to margin:0 auto;

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.