• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

CSS/SCSS problem z valign

0 głosów
45 wizyt
pytanie zadane 14 czerwca w HTML i CSS przez profsor500 Użytkownik (560 p.)

Mój problem wygląda następująco:

Chciałem utworzyć banner z grafiką w tle a na nim tekst.
Zależy mi, aby całość była wyśrodkowana.
Wyczytałem, że aby wyśrodkować przez valign trzeba ustawić 'display:table-cell;' i tu pojawia się  problem-> całość zwęża się do szerokości tekstu. Kiedy ustawię 'display:block' to tekst wyśrodkowany jest poziomo, a pionowo już nie.
HTML:
 

 <div id='banner'><h1>Maine bannere</h1></div>

CSS (a dokładniej, SCSS):
 


#banner{
	
	width:100%;
	height:75px;
	background-image: url("../images/truesimple.jpg");
	background-size:100%;
	display:table-cell;	

}
@mixin bez-nazwy(){
	
	valign:bottom;
	text-align:center;
	width:100%;

}
h1{
	@include bez-nazwy();
}

(mixin ostatecznie będzie przeniesiony do pliku zewnętrznego, ale wstawiłem go tutaj, do czasu rozwiązania problemu. Poza tym to też, żeby sobie go poćwiczyć).

3 odpowiedzi

+1 głos
odpowiedź 14 czerwca przez pablop76 Maniak (67,820 p.)
0 głosów
odpowiedź 14 czerwca przez Wujek Greg Dyskutant (9,290 p.)
Daj dla diva display:table, a dla h1 display:table-cell, powinno załatwić sprawę. Aczkolwiek osobiście nie jestem fanem rozwiązań typu table i table-cell, wolę flexa :D
0 głosów
odpowiedź 14 czerwca przez besthost Nowicjusz (200 p.)

Kolego, spróbuj grid'em:

.wrapper {

display: grid;

grid-template-columns: 1fr;

grid-template-rows: 1fr;

p {

width: 60px; //   zalezna od ilosci tekstu

align-self: center;

}

}

 

Podobne pytania

0 głosów
0 odpowiedzi 104 wizyt
+1 głos
2 odpowiedzi 80 wizyt
pytanie zadane 12 września w HTML i CSS przez Olek Szymański Użytkownik (820 p.)
0 głosów
1 odpowiedź 28 wizyt
pytanie zadane 25 czerwca w HTML i CSS przez profsor500 Użytkownik (560 p.)
Porady nie od parady
Pytania na temat serwisu SPOJ należy zadawać z odpowiednią kategorią dotyczącą tej strony.SPOJ

54,442 zapytań

98,326 odpowiedzi

202,258 komentarzy

26,743 pasjonatów

Przeglądających: 128
Pasjonatów: 4 Gości: 124

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...