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

Brak reakcji na padding-bottom

Aruba Cloud - Virtual Private Server VPS
0 głosów
349 wizyt
pytanie zadane 12 lutego 2019 w HTML i CSS przez vingilot85 Obywatel (1,150 p.)

Witam,
zawartość div'a nie chce mi się podnieść, aby była wyśrodkowana w pionie

<nav id="nav">
		
	<div class="logo">
		<a href="index.html"><img src="img/logo.png" width="40" height="40"/>
			<div id="logotxt">
				FAKE<span style="color:#DE341F;">.</span>NEWS
			</div>
		</a>
	</div>
			
	<div class="navbutton">
		<a href="oczekujace.html">OCZEKUJĄCE</a>
	</div>
			
	<div class="navbutton">
		<a href="shity.html">(S)HITY</a>
	</div>

</nav>
#nav
{
	text-align:center;
	height:50px;
	background-color:#DE341F;
}

.logo
{
	color:white;
	display:inline-block;
	padding:5px;
	height:40px;
}

#logotxt
{
	display:inline-block;
	font-size:40px;
	margin-left:20px;
}

.navbutton
{
	height:32px;
	width:200px;
	font-size:30px;
	display:inline-block;
	padding-top:8px;
}

Próbowałem już padding, margin, line-height, zero reakcjii, jak również różnych ich konfiguracji, np. zostawienie więcej miejsca w pionie pudełka. W poziomie, działa jak należy.

Dostrzega ktoś, gdzie robie błąd?

komentarz 12 lutego 2019 przez pablop76 VIP (123,540 p.)

padding nie odsuwa zawartości  elementu od jego krawędzi tylko powiększa pudełko o wartość dopełnienia. Więc jeżeli ustawisz wysokość elementów równą wysokości rodzica i nadasz dla rodzica dopełnienie to uzyskasz efekt wyśrodkowanie.

Możliwości jest oczywiście więcej

2 odpowiedzi

0 głosów
odpowiedź 12 lutego 2019 przez niezalogowany
Słowa klucze: box-sizing: border-box, line-height, vertical align: middle i najlepsze - flexbox.
0 głosów
odpowiedź 12 lutego 2019 przez pirouetti Mądrala (6,490 p.)

Ja najczęściej środkuje tak jeśli tylko o pionowe środkowanie chodzi:

.vertical-middle {
    display: table-cell;
    vertical-align: middle
}

.h500 {
height:500px
}

Do tego html

<div class="h500">
<div class="vertical-middle h500">
Treść
</div>
</div>

Trzeba tylko określić wysokość.

Jeśli trzeba ci pełne wyśrodkowanie diva w divie pionowo i poziomo to napisz.

1
komentarz 12 lutego 2019 przez niezalogowany

Pełne wyśrodkowanie (pion-poziom) to najlepiej flexbox-em. Podenerwuje tutejszych ekspertów i podam link z w3schools (szukaj na stronie "Perfect centering"): https://www.w3schools.com/css/css3_flexbox.asp

komentarz 12 lutego 2019 przez pirouetti Mądrala (6,490 p.)

Tak.

Bardzo prosto:

<div class="fullcent height">
       <div></div>
 </div>  
.fullcent {
	display: flex;
	justify-content: center;
	align-items: center
}

.height {
height: 
}

 

komentarz 14 lutego 2019 przez vingilot85 Obywatel (1,150 p.)
Dzięki za odpowiedzi, pobawię się i poeksperymentuję z tym
komentarz 14 lutego 2019 przez pirouetti Mądrala (6,490 p.)
http://howtocenterincss.com/ polecam tą stronę

Podobne pytania

0 głosów
5 odpowiedzi 4,514 wizyt
pytanie zadane 22 sierpnia 2015 w HTML i CSS przez Agentok Użytkownik (660 p.)
0 głosów
1 odpowiedź 272 wizyt
+1 głos
2 odpowiedzi 329 wizyt

93,335 zapytań

142,331 odpowiedzi

322,415 komentarzy

62,670 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...