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ć).