HTML/CSS responzivny web, vycentrovanie dolneho zoznamu na stred

Dobrý den,

robím stránku. Zatial je to iba cisto o HTML/CSS. Dorobil som responzívnost webu, vsetko sa pekne prisposobuje ako chcem az na dolny panel, ktorý obsahuje zoznam ikon socialnych sieti (sú to odkazi).

Mám to tak ako je to na screenshotoch. Chcem aby vsetky ikonky boli pri lubovolnej sirke okna vždy na stred. Takze s pravej strany aj z lavej strany ku okrajom vzdy rovnako daleko. Prilozil som screenshoty z html a aj z css ze ako to mám. Samozrejme začínal som prv na najmenší mobil...mobile first

P.S. V html som zaciatocnik, tak ignorujte komenty aj keby ste nieco urobili inak. Zaujima ma len ten dolny panel

resp1.png 68.51 KiB resp2.png 466.58 KiB resp3.png 12.12 KiB resp4.png 25.57 KiB

Předmět	Autor	Datum
Než ti někdo kdo s tím umí odpoví, zkoušel si alespoň vycentrovat tu class "container" ve kterém máš… nový HPET 15.11.2019 19:16	HPET	15.11.2019 19:16
Skusil som teraz no nejde. Ani nechápem co má natom ísť. Mne netreba centrovat ten sivý pásik. Ten c… nový rrrrRRR 15.11.2019 19:40	rrrrRRR	15.11.2019 19:40
No v podstate si mal pravdu, ale aj tak som si musel sam pomôct iným webom. Neveim preco to v .conta… poslední rrrrRRR 15.11.2019 20:24	rrrrRRR	15.11.2019 20:24

Než ti někdo kdo s tím umí odpoví, zkoušel si alespoň vycentrovat tu class "container" ve kterém máš ty položky ul-li ?

.container {
    margin-left: auto;
    margin-right: auto
}

(možná přidat display: block;)

Skusil som teraz no nejde. Ani nechápem co má natom ísť. Mne netreba centrovat ten sivý pásik. Ten chcem mať vždy 100% šírky okna.

No v podstate si mal pravdu, ale aj tak som si musel sam pomôct iným webom. Neveim preco to v .container nefungovalo, ale funguje to tak ked v ul zozname vytvorim class-u a v css jej nastavim max sirku a potom dám margin right/left: auto....vid kod.

<nav class="container">
	<ul class="list">
		<li> <a href="https://www.facebook.com/" class="fa fa-facebook"></a> </li>
		<li> <a href="https://twitter.com/" class="fa fa-twitter"></a> </li>
		<li> <a href="https://www.youtube.com/" class="fa fa-youtube"></a> </li>
		<li> <a href="https://www.snapchat.com/" class="fa fa-snapchat"></a> </li>
	</ul>
</nav>

.list {
	max-width: 300px;
	margin-left: auto;
	margin-right: auto;
}

takze vdaka, vybavené

Zpět do poradny Odpovědět na původní otázku Nahoru