Wyśrodkowywanie tabeli

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

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,340 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 ;)