Wyśrodkowanie divów - problem z rodzicem

pytanie zadane 11 września 2016 w HTML i CSS przez subterras Użytkownik (680 p.)
edycja 11 września 2016 przez Arkadiusz Waluk

Witam, zacząłem się bawić RWD z własnym prostym grindem i mam problem ze środkowaniem divow. Chcialbym wysrodkowac te 3 divy z clasa col-3. Ogolnie srodkowanie elementow nie jest moją mocną stroną więc jakby ktoś chciałby to wytłumaczyć co tutaj zepsułem byłbym wdzięczny. Oto część kodu.

<div id="container">
        <div class="row">
            <div class="col-12">
                <h1>Naglowek</h2>
            </div>
        </div>
        <div class="row">
            <div class="col-3">
                <i class="icon-gift"></i>
                <p>Tekst</p>
            </div>
            <div class="col-3">
                <i class="icon-umbrella"></i>
                <p>Tekst</p>
            </div>
            <div class="col-3">
                <i class="icon-mail"></i>
                <p>Tekst</p>
            </div>
        </div>
    </div>

#container{
    min-height: 60%;
    background-color: #A79F9F;
    text-align: center;
    padding: 20px;
    width: 100%;
}

#container div div {
    display: inline-block;
}

#container h1{
    padding:10px;
}

#container i{
    font-size:100px;
}

Grind jest podstawowy, tylko width w procentach.

Wiem że gdybym diva z clasa row potraktował jako container (i tak pewnie powinienem zrobic ) to wszystko by działało ale nie wiem dlaczego i dlatego chciałbym się dowiedzieć :P

komentarz 11 września 2016 przez Czort Nałogowiec (32,500 p.)

Po to dodaje się klasy, żeby używać ich do stylowania, a nie #container div div jakieś.

Edit: + nie grind tylko "GRID"

1	komentarz 11 września 2016 przez ScriptyChris Mędrzec (190,190 p.) @subterras, kod należy wstawiać w odpowiednie bloczki.

3 odpowiedzi

odpowiedź 11 września 2016 przez Czort Nałogowiec (32,500 p.)

odpowiedź 11 września 2016 przez Eimens Maniak (69,240 p.)

Co ma tam wgl działać?

Żeby to się wgl chciało środkować to musisz przyjąć jakąś szerokość container'a. Dopiero jak to ustalisz to będziesz mógł wyśrodkować element. Rodzica podaj w px albo 100% dopiero col-3 mogą mieć % (najlepiej calc).

komentarz 11 września 2016 przez subterras Użytkownik (680 p.)

Container ma przecież witdth:100%; Jego rodzicem jest już body.

komentarz 11 września 2016 przez Eimens Maniak (69,240 p.)

To daj dla col-12 width: 100% a dla col-3 daj width: calc(100% / 4);

odpowiedź 11 września 2016 przez pablop76 VIP (123,180 p.)


<!DOCTYPE HTML>
<html lang="pl">
    <head>
        <meta charset="utf-8" />
        <title></title>

				<style>
				* {
					box-sizing: border-box;
				}
				.col-1 {width: 8.33%;}
				.col-2 {width: 16.66%;}
				.col-3 {width: 25%;}
				.col-4 {width: 33.33%;}
				.col-5 {width: 41.66%;}
				.col-6 {width: 50%;}
				.col-7 {width: 58.33%;}
				.col-8 {width: 66.66%;}
				.col-9 {width: 75%;}
				.col-10 {width: 83.33%;}
				.col-11 {width: 91.66%;}
				.col-12 {width: 100%;}

				[class*="col-"] {
					float: left;
					padding: 15px;
					border: 1px solid red;
				}

				.row::after {
					content: "";
					clear: both;
					display: block;
				}

				.baner{
					background-color: #A79F9F;
					text-align: center;
					width: 100%;
					height: auto
				}
				</style>
    </head>
        <body>
			<div class="row baner">
				<div class="col-12">
					<h1>Naglowek</h2>
				</div>
			</div>
			<div class="row">
				<div class="col-4">
					<i class="icon-gift"></i>
					<p>Tekst</p>
				</div>
				<div class="col-4">
					<i class="icon-umbrella"></i>
					<p>Tekst</p>
				</div>
				<div class="col-4">
					<i class="icon-mail"></i>
					<p>Tekst</p>
				</div>
			</div>
        </body>
</html>

row to znaczy rząd i w każdym rzędzie musi być tyle col- żeby ich suma wynosiła 12. A więc jeżeli chcesz trzy kolumny to dajesz trzy razy col-4 bo 4+4+4 =12. A u ciebie jest col-3 co razy 3 daje 9. Oczywiście możesz dać col-3 i nadać wartość 33.3% dla każdego ale ja ci daje wytyczne z http://www.w3schools.com/css/css_rwd_grid.asp Wszystko tam jest wyjaśnione.