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

Wyśrodkowywanie tabeli

VPS Starter Arubacloud
0 głosów
767 wizyt
pytanie zadane 31 stycznia 2019 w HTML i CSS przez Meps Nowicjusz (170 p.)

Witam mam problem z wyśrodkowaniem tabeli w pionie. Mam na myśli całą tabelę, nie elementy wewnątrz kolumn.

<!DOCTYPE HTML>
<html lang="pl">

<head>
	<meta charset="utf-8"/>
	<title>JavaScript</title>
	<meta name="description" content="Do js"/>
	<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
	<p class="logo">Elderflower</p>
	<div class="container">
		<table class="center" > 
			<tr>
				<th scope="row">Treść tabliczki:</th>
				<td> nazwa</td>
			</tr>
			<tr>
				<th scope="row">Liczba znaczków:</th>
				<td>21</td>
			</tr>
			<tr>
				<th scope="row">Wartość częściowa:</th>
				<td>1</td>
			</tr>
			<tr> 
				<th scope="row">Koszt wysyłki</th>
				<td>3</td>
			</tr>
			<tr>
				<th scope="row">Wartość całkowita:</th>
				<td>13</td>
			</tr>
		</table>
	</div>
</body>
	<script src="script.js"></script>
</html>
body
{
	background-image: url("img/logo.png");
	background-repeat: repeat;
}
.logo
{
	text-align: center;
	font-size:35px;
	text-transform: uppercase;
	text-decoration: underline;
	margin: 4px;
	text-shadow: 0 0 10px #777777;
}
.container
{
	width: 400px;
	height: 200px;
	margin: auto  auto ;
	background-color: white;
	box-shadow: 0 0 10px #777777;
	text-align: center;
}
.center
{
	height: 100px;
	display: inline;
	vertical-align: middle;
}

 

2 odpowiedzi

+1 głos
odpowiedź 31 stycznia 2019 przez Tpk Nałogowiec (40,220 p.)
wybrane 31 stycznia 2019 przez Meps
 
Najlepsza

Najprościej na flex'ach bez zabawy z vertical-align:

.container{
    display: flex;
    justify-content: center; /* poziom */
}

.center {
    align-self: center; /* pion */
}

 

1
komentarz 31 stycznia 2019 przez Meps Nowicjusz (170 p.)
Dzięki wielkie! Działa :D
komentarz 31 stycznia 2019 przez Meps Nowicjusz (170 p.)

Mam jeszcze pytanko. Dlaczego w poziomie centruje w rodzicu (containerze), a w pionie musze centrować w dziecku?

.container
{
	width: 400px;
	height: 200px;
	margin: auto  auto ;
	background-color: white;
	box-shadow: 0 0 10px #777777;
	display: flex;
	justify-content: center;
        align-self: center; /*zamiast w .center dlaczego nie może tak być?/*
	
}
.center
{
	height: 100px;
	
	
}

 

komentarz 1 lutego 2019 przez pablop76 VIP (123,460 p.)
.container{
    display: flex;
    justify-content: center;
    align-items: center;
}

Użyłbym raczej align-items

komentarz 1 lutego 2019 przez Tpk Nałogowiec (40,220 p.)
Stwierdziłem, że wszystkie elementy chcesz mieć wyśrodkowane w poziomie ale niekoniecznie wszystkie w pionie (wiem, wiem cały jeden). A dzięki temu można było pokazać drugi sposób ;)
0 głosów
odpowiedź 31 stycznia 2019 przez pablop76 VIP (123,460 p.)

Podobne pytania

0 głosów
3 odpowiedzi 1,068 wizyt
pytanie zadane 16 listopada 2016 w HTML i CSS przez tatar Użytkownik (740 p.)
0 głosów
1 odpowiedź 252 wizyt
pytanie zadane 29 lutego 2016 w HTML i CSS przez pulpet112 Użytkownik (760 p.)
–1 głos
1 odpowiedź 297 wizyt
pytanie zadane 6 kwietnia 2023 w HTML i CSS przez magiiczny Nowicjusz (140 p.)

93,081 zapytań

142,045 odpowiedzi

321,464 komentarzy

62,427 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 2

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

...