Mam problem mianowicie mam diva, który jest wyśrodkowany na stronie "margin-left:auto" i "margin:right:auto". W środku diva mam 6 obrazów. Każdy jest w divie i ma w css nadany atrybut (chyba tak się to nazywa) "float:left". Wszystko fajnie tylko, że div z obrazami tak naprawdę się nie wyśrodkowuje, ponieważ po prawej jego stronie zostaje puste pole ponieważ wszystkie obrazy w tym divie są wyrównywane do lewej strony. Stąd moje pytanie. Jak zrobić by po prawej stronie tego diva nie zostawało puste pole, a wszystkie obrazy miały równy margines z lewej jak i z prawej strony?
Na obrazie poniżej ilustruje mój problem :)
Czyli jeszcze raz. Chce by nie było tej wolnej przestrzeni tylko żeby wszystkie obrazy ładnie się wyśrodkowywały w tym divie, który jest wyśrodkowany na całej stronie.
Dołączam kod strony:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Epoki literackie</title>
<meta name="description" content="Najważniejsze informacje o epokach literackich">
<meta name="keywords" content="literatura, epoki, epoki literackie">
<meta name="author" content="Krystian Wolański">
<meta http-equiv="X-Ua-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Gentium+Book+Basic:400,700&subset=latin-ext" rel="stylesheet">
</head>
<body>
<header>
<h1 class="title">Epoki Literackie</h1>
<nav>
<ul class="menu">
<li><a href="index.html">Strona główna</a></li>
<li><a href="#">Pierwszy raz tutaj?</a></li>
<li><a href="#">O autorze</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
</header>
<main>
<article class="newest">
<div class="content">
<div class="epoka">
<figure>
<a href="#"><img src="img/antyk.jpg" alt="Antyk i Biblia"> </a>
<figcaption>Antyk i Biblia</figcaption>
</figure>
</div>
<div class="epoka">
<figure>
<a href="#"><img src="img/sredniowiecze.jpg" alt="Średniowiecze"> </a>
<figcaption>Średniowiecze</figcaption>
</figure>
</div>
<div class="epoka">
<figure>
<a href="renesans.html"><img src="img/renesans.jpg" alt="Renesans"> </a>
<figcaption>Renesans</figcaption>
</figure>
</div>
<div class="epoka">
<figure>
<a href="#"><img src="img/barok.jpg" alt="Barok"> </a>
<figcaption>Barok</figcaption>
</figure>
</div>
<div class="epoka">
<figure>
<a href="oswiecenie.html"><img src="img/oswiecenie.jpg" alt="Oświecenie"> </a>
<figcaption>Oświecenie</figcaption>
</figure>
</div>
<div class="epoka">
<figure>
<a href="#"><img src="img/pozytywizm.jpg" alt="Pozytywizm"> </a>
<figcaption>Pozytywizm</figcaption>
</figure>
</div>
<div style="clear:both;"></div>
</div>
</article>
</main>
<footer>
<div class="footer">Wszelkie prawa zastrzeżone © 2017 Dziękuję za wizytę!</div>
</footer>
</body>
</html>
body
{
margin: 0;
font-size: 18px;
font-family: 'Gentium Book Basic', serif;
color: #efefef;
background-color: #2F3336;
width:100%;
height:100%;
}
.title
{
margin-top: 28px;
text-align: center;
font-size: 60px;
font-weight: 400;
letter-spacing: 5px;
color: #ddd;
text-transform: uppercase;
margin-bottom: 0;
padding: 0;
}
.menu
{
text-align: center;
list-style-type: none;
font-size: 20px;
background-color: #163043;
padding: 15px;
letter-spacing: 2px;
margin-bottom: 0;
}
.menu a
{
text-decoration: none;
color: #efefef;
}
.menu a:hover
{
text-decoration: none;
color: #E88F1A;
}
.menu>li
{
display: inline-block;
padding: 10px;
padding-bottom:5px;
padding-top:5px;
border-right: 1px dashed #efefef;
}
.menu >li:first-child
{
border-left: 1px dashed #efefef;
}
.newest
{
background-color: #222930;
}
.content
{
padding-top: 40px;
width: 82%;
margin-left:auto;
margin-right:auto;
min-height:692px;
}
.epoka
{
float: left;
margin: 8px;
margin-bottom: 28px;
text-align: center;
}
.epoka img
{
width:384px;
height: 237.3250517px;
opacity: 0.85;
border-radius:8px;
}
.epoka img:hover
{
opacity:1;
}
figure
{
margin: 0;
padding: 0;
}
figcaption
{
margin-top: 10px;
padding: 0;
font-weight: 700;
}
.footer
{
padding: 5px;
text-align: center;
}
PS. Czy można stylizować sekcje z html5? Mam tu na myśli; <section>,<article><header> itd.
