Wyśrodkowanie bloka

Question

Witam.! Z dużą uwaga oglądam świetne filmiki Pana Mirosława  i dlatego postanowiłem stworzyć małą własną witryne. Nie stety mója wiedza póki co jest ograniczona ale dzięki działalności waszej społeczności sie to zmienia :)

Przechodząc do sedna sparwy ma pytanie. Jak wyśrodkowac te 3 bloki ?

Answer 1

No jasne że samo: 

margin: 0 auto

nie pomoże. Musisz nadać szerokość dla diva.

 

Daj taki kod:

#network {
margin: 0 auto;
width: 510px; 
}

Chodzi w tym że sumujesz szerokość wszystkie obrazków czyli: 3x150px + marginesy 10px (więc lewy 10px i prawy 10px) czyli razem 20x3 = 60px czyli 450px + 60px = 510px.

Comments

O działa wielkie dzięki ale musze to jeszcze przeanalizować :)

---

Chodzi w tym o to że właściwość margin jest tak zrobiona, że gdy chcesz wyśrodkować w poziomie jakiś elemnt tu musisz podać jego szerokość czyli wartość width.

Trochę praktyki i bez problemu zrozumiesz to.

Answer 2

margin:auto;

jeśli są one w jakimś divie to wyśrodkuje do niego, a wtedy musisz wyśrodkować właśnie ten div.

Comments

Kurde nie pomogło: 

HTML:

			<div id="network">
			<div class="fb">
				<a href="https://www.facebook.com/profile.php?id=100005271512987&fref=ts" target="_blank"><i class="icon-facebook"></i></a>
			</div>
			<div class="gplus">
				<i class="icon-gplus"></i>
			</div>
			<div style="clear:both;"></div>
			</div>

 

CSS:

#network {
	margin: auto;
}
.yt {
	float: left;
	width: 150px;
	height: 142px;
	margin:10px;
}
.yt:hover {
	background-color: #d94348;
}
.gplus {
	float: left;
	width: 150px;
	height: 142px;
	margin:10px;
}
.gplus:hover {
	background-color: #d95333;
}
.fb {
	float: left;
	width: 150px;
	height: 142px;
	margin: 10px;
}
.fb:hover {
	background-color: #4668b3;
}

 

---

#network {
    margin: auto;
    width:510px;}

Ten div bez width jest na całą strone domyślnie i to oczywiste że ci go nie wyśrodkuje. Musi on być szerokości tych 3 twoich divów fb+yt+gplus(nie zapomnij o marginesach) czyli:

10px+150px+10px+10px+150px+10px+10px+150px+10px=510px

#PROTIP:

Jeśli masz divy niewidzialne bez tła tak jak twój #network, to warto je sobie pokolorować na czas pracy nad stroną, wtedy wszystko przejrzyście widać jakie rozmiary, marginesy są ustawione itd.

Answer 3

Najlepiej załatwi sprawę ta linijka kodu:

margin: 0 0 auto;

 

Answer 4

 

to możesz zrobić z padding-left:twoja wartość; na tej stronie jest przykłady http://jsfiddle.net/L88pjb1a/1/