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

Brak reakcji na padding-bottom

0 głosów
85 wizyt
pytanie zadane 12 lutego w HTML i CSS przez vingilot85 Nowicjusz (200 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 przez pablop76 Szeryf (97,850 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 przez niezalogowany
Słowa klucze: box-sizing: border-box, line-height, vertical align: middle i najlepsze - flexbox.
0 głosów
odpowiedź 12 lutego przez pirouetti Bywalec (2,690 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.

komentarz 12 lutego 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 przez pirouetti Bywalec (2,690 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 przez vingilot85 Nowicjusz (200 p.)
Dzięki za odpowiedzi, pobawię się i poeksperymentuję z tym
komentarz 14 lutego przez pirouetti Bywalec (2,690 p.)
http://howtocenterincss.com/ polecam tą stronę

Podobne pytania

0 głosów
5 odpowiedzi 2,422 wizyt
pytanie zadane 22 sierpnia 2015 w HTML i CSS przez Agentok Użytkownik (660 p.)
–1 głos
1 odpowiedź 95 wizyt
0 głosów
5 odpowiedzi 262 wizyt
Porady nie od parady
Zadając pytanie postaraj się o odpowiedni tytuł, kategorię oraz tagi.Tagi

66,407 zapytań

113,168 odpowiedzi

239,568 komentarzy

46,673 pasjonatów

Przeglądających: 306
Pasjonatów: 4 Gości: 302

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.

...