• 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
42 wizyt
pytanie zadane 14 czerwca w HTML i CSS przez profsor500 Początkujący (280 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 (53,700 p.)
0 głosów
odpowiedź 14 czerwca przez Wujek Greg Dyskutant (9,210 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 91 wizyt
0 głosów
1 odpowiedź 191 wizyt
pytanie zadane 28 stycznia 2016 w HTML i CSS przez Paweł123 Pasjonat (22,670 p.)
0 głosów
1 odpowiedź 107 wizyt
pytanie zadane 1 grudnia 2015 w HTML i CSS przez PATYL Maniak (67,310 p.)
Porady nie od parady
Pytania na temat serwisu SPOJ należy zadawać z odpowiednią kategorią dotyczącą tej strony.SPOJ

51,027 zapytań

93,344 odpowiedzi

189,543 komentarzy

24,885 pasjonatów

Przeglądających: 269
Pasjonatów: 12 Gości: 257

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.

...