Jak wyśrodkować obraz (tło) w div?
Czy możliwe jest wyśrodkowanie obrazu tła w div? Próbowałem prawie wszystkiego - ale bez powodzenia:
<div id="doit">
Lorem Ipsum ...
</div>
//CSS
#doit { background-image: url(images/pic.png); background-repeat: none; text-align: center; }
Czy to możliwe? 8 answers
#doit {
background: url(url) no-repeat center;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-02-18 10:39:11
Try background-position:center;
EDIT: ponieważ to pytanie jest coraz dużo odsłon, warto dodać kilka dodatkowych informacji:
text-align: center
nie będzie działać, ponieważ obraz tła nie jest częścią dokumentu i dlatego nie jest częścią przepływu.
background-position:center
jest skrótem od background-position: center center
; (background-position: horizontal vertical
);
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-12-25 16:41:18
Użyj background-position:
background-position: 50% 50%;
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-02-18 10:36:44
Jeśli obraz tła jest wyrównanym pionowo arkuszem sprite, możesz wyśrodkować poziomo każdy sprite w następujący sposób:
#doit {
background-image: url('images/pic.png');
background-repeat: none;
background-position: 50% [y position of sprite];
}
Jeśli obraz tła jest wyrównanym poziomo arkuszem sprite, możesz wyśrodkować każdy sprite w pionie w następujący sposób:
#doit {
background-image: url('images/pic.png');
background-repeat: none;
background-position: [x position of sprite] 50%;
}
Jeśli arkusz sprite jest kompaktowy lub nie próbujesz wyśrodkować obrazu tła w jednym z wyżej wymienionych scenariuszy, rozwiązania te nie mają zastosowania.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-04-25 00:25:27
To działa dla mnie:
#doit{
background-image: url('images/pic.png');
background-repeat: no-repeat;
background-position: center;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-05-13 22:04:39
Do wyśrodkowania lub pozycjonowania obrazu tła należy użyć właściwości background-position
.
Właściwość background-position ustawia pozycję początkową obrazu tła po stronach top
i left
elementu .
Składnia CSS to background-position : xvalue yvalue;
.
"xvalue" i "yvalue" obsługiwane wartości są jednostkami długości, takimi jak px
oraz nazwami procentowymi i kierunkowymi, takimi jak left, right i itd .
"xvalue" jest poziomą pozycją tła i zaczyna się od góry elementu . To znaczy jeśli użyjesz 50px
to będzie "50px" od góry elementów . A "yvalue" to pozycja pionowa, która ma ten sam warunek .
Więc jeśli użyjesz background-position: center;
Twój obraz tła będzie wyśrodkowany .
Ale zawsze używam tego kodu:
.yourclass {
background: url(image.png) no-repeat center /cover;
}
Wiem, że to takie zagmatwane, ale to znaczy:
.yourclass {
background-image: url(image.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
I Wiem, że też background-size
jest nową właściwością, a w skompresowanym kodzie co to jest /cover
ale te kody oznaczają fill
rozmiar tła i pozycjonowanie w tle pulpitu systemu windows .
Więcej szczegółów na temat background-position
można zobaczyć w tutaj i background-size
w tutaj .
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-03-17 15:44:04
To działa dla mnie:
.network-connections-icon {
background-image: url(url);
background-size: 100%;
width: 56px;
height: 56px;
margin: 0 auto;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-12-07 20:19:46
To działa dla mnie:
<style>
.WidgetBody
{
background: #F0F0F0;
background-image:url('images/mini-loader.gif');
background-position: 50% 50%;
background-repeat:no-repeat;
}
</style>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-12-12 16:36:59