• 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
Komentarze do pytań nie służą do odpowiadania, od tego jest wydzielona sekcja odpowiedzi. Funkcją komentarzy jest natomiast możliwość uzyskania dodatkowych informacji na temat samego posta.Komentarze

54,442 zapytań

98,326 odpowiedzi

202,258 komentarzy

26,743 pasjonatów

Przeglądających: 130
Pasjonatów: 4 Gości: 126

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.

...