5 obrazków znajdujących się obok siebie nie pojawiło się na środku strony.

Question

Witam.

Na podstronie mam 5 obrazków znajdujących się obok siebie, ale chciałbym, aby były położone na środku strony. Niestety aktualnie znajdują się po lewej stronie.

W divie wrapper jest menu i stopka. Szerokość menu i stopki to 1000px. Pomiędzy menu, a stopką ma się znajdować wyśrodkowany obszar o szerokości 700px, a w nim wyśrodkowanych 5 obrazków.

<div class="wrapper">

	<nav>
		<ul>
			<li class="home"><a href="index.php">Strona główna</a></li>
		</ul>
	</nav>

	<div id="content">
		<ul style="margin-top: 25px">
			<li>
				<a href="strona1.php">
					<img class="foto" src="obrazek1.jpg"></img>
				</a>
			</li>
		</ul>

		<ul style="margin-top: 25px; margin-left: 140px">
			<li>
				<a href="strona2.php">
					<img class="foto" src="obrazek2.jpg"></img>
				</a>
			</li>
		</ul>

		<ul style="margin-top: 25px; margin-left: 280px">
			<li>
				<a href="strona3.php">
					<img class="foto" src="obrazek3.jpg"></img>
				</a>
			</li>
		</ul>

		<ul style="margin-top: 25px; margin-left: 420px">
			<li>
				<a href="strona4.php">
					<img class="foto" src="obrazek4.jpg"></img>
				</a>
			</li>
		</ul>

		<ul style="margin-top: 25px; margin-left: 560px">
			<li>
				<a href="strona5.php">
					<img class="foto" src="obrazek5.jpg"></img>
				</a>
			</li>
		</ul>
	</div>

	<div class="footer">Strona &copy; 2016</div>
</div>

body
{
	margin: 0px;
	width: 100%;
	height: 800px;
}

.wrapper
{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

#content
{
	padding: 1px;
	width: 700px;
	margin-left: auto;
	margin-right: auto;
	background-color: #008000;
}

Chciałbym, aby te 5 obrazków było położone w divie "content" na środku strony. Te obrazki mają być położone w obszarze o szerokości 700px. Specjalnie stworzyłem w divie content roboczy zielony kolor tła, aby lepiej wszystko widzieć. Szerokość każdego obrazka to 100px, zdjęć jest 5, zatem 500px zajmują łącznie wszystkie obrazki. Między obrazkami są 4 niewielkie odstępy, więc od pierwszego zdjęcia do ostatniego jest jakoś ponad 600px.

Aktualnie to robocze zielone tło jest przesunięte nieco w lewą stronę. Chciałbym, aby te 5 obrazków było w środku tego zielonego tła.

Gdzie jest błąd?

Answer 1

Jeśli w CSSie trzeba coś liczyć, to zły znak : )

http://codepen.io/Argeento/pen/ZWxXMe

Comments

Możesz umieścić poprawiony kod na jsfiddle albo tutaj? Na tym codepen.io nie widzę kodu.

---

<div class="wrapper">
  
    <nav>
        <ul>
            <li class="home"><a href="index.php">Strona główna</a></li>
        </ul>
    </nav>
 
    <main class="content"> 
      <!-- Nie używaj id w CSSie -->
      <!-- Prawdopodobnie będzie tutaj pasował element 'main' -->
       
      <!-- Nie stosuj nigdy CSS inline: style="margin-top: 25px; margin-left: 560px", straszny bałagan robią w kodzie -->
      
      <ul class="images-list">
        <li><a href="#" class="foto"><img src="" alt=""></a></li>
        <li><a href="#" class="foto"><img src="" alt=""></a></li>
        <li><a href="#" class="foto"><img src="" alt=""></a></li>
        <li><a href="#" class="foto"><img src="" alt=""></a></li>
        <li><a href="#" class="foto"><img src="" alt=""></a></li>
      </ul>
      <!-- Wszstkie img muszą mieć atrubut alt! -->
      <!-- A tutaj przydałoby się również, żeby znaczniki a miały atrybut title -->

      
    </main>
 
    <footer class="footer">Strona &copy; 2016</footer> 
      <!-- Element footer, zamiast div -->
</div>

body
{
    margin: 0px;
    width: 100%;
    height: 800px;
}
 
.wrapper
{
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}
.content
{
    width: 700px;
    margin-left: auto;
    margin-right: auto;
    background-color: #008000;
}


/* Stylizacja obrazków */
.images-list {
  list-style-type: none;
  text-align: center;
  padding: 0;
} 
.images-list > li {
  display: inline-block;
}

 

---

Zrobiłem to innym sposobem i też jest OK.

#content
{
	padding: 1px;
	margin-top: 20px;
	margin-left: 127px;
}

Taki zapis w CSS umożliwił mi wyśrodkowanie tych 5 obrazków z lewej i prawej strony równo co do piksela.

Dzięki za próbę pomocy.

Answer 2

Po pierwsze 

style="margin-top: 25px"

Nie rób tak! 

Wszystkie style wkładaj w oddzielny plik. 

Jak to zrobić możesz użyć flexa, ale jeżeli nie czujesz się na mocy to możesz dla pierwszego i ostatniego elementu dodać większy margines. :first-child i :last-child. Oczywiście wstawienie każdego obrazka w oddzielne ul li a to słaby pomysł, jeżeli już to w jeden znacznik ul. Jeżeli nie będzie ci to służyło za menu to bym wywalił ul. Możesz dać dla każdego elementu float: left; i dać odpowiedni margines, oczywiście nie zapominając o clear: both; Też nasuwa się pytanie co będzie w tym divie #content.

Comments

Pokombinowałem z kodem i teraz jest OK.