centrowanie trzech, przylegających divów

0

Dzień dobry.

Mam taki problem. Mam taki kod:

<div id="whole">
	<div id="lew">
	..:: MENU ::..<br>
	.: O1 :.<br>
	</div>
	<div id="sro">
		<h1>Witaj</h1><br>
	</div>
	<div id="pra">
		blah
	</div>
</div>

oraz css

body
{
	font: 12px Verdana;
	width: 100%;
	margin: auto;
}

#whole
{
	margin-left: auto;
	margin-right: auto;
}

#lew
{
	float: left;
	background-color: #66AA66;
	color: #FFFFFF;
	width: 15%;
	height: 100%;
	text-align: center;
}

#sro
{
	float: left;
	background-color: #33AA33;
	color: #FFFFFF;
	width: 45%;
	height: 100%;
	text-align: center;
}

#pra
{
	float: left;
	background-color: #66AA66;
	color: #FFFFFF;
	width: 15%;
	height: 100%;
	text-align: center;
}

a
{
	text-decoration: none;
}

Mam dwie boczne kolumny i środek. Wszystkie do siebie przylegają. Ale jak całość wyśrodkować, żeby po bokach było body, a wszystkie kolumny wycentrowane jako grupa?
Dzięki
M.

1

Obczaj: http://drakonica.pl/dokumenty/flexbox_zestawienie.htm

0
Freja Draco napisał(a):

Obczaj: http://drakonica.pl/dokumenty/flexbox_zestawienie.htm

Dziękuję. Przeczytałem i próbowałem kilkoma sposobami. Jednak nijak nie działa. Albo mi wyrównuje do lewej krawędzi jeden pod drugim, albo (bez flex) wyśrodkowuje prawidłowo, jednak nie od początku strony, tylko nierówno.

title

W divach jest tekst, który wymazałem ze zrzutu. Może to przez tekst

body
{
	font: 12px Verdana;
	width: 100%;
	margin: auto;
	background-color: #BBBBBB;
}

#calosc
{
	margin: 0 auto;
	text-align: center;
	vertical-align: top;
	flex-direction: start;
	/* align-self: flex-start; */
}

#lewy
{
	display: inline-block;
	background-color: #66AA66;
	color: #FFFFFF;
	width: 15%;
	height: 100%;
	text-align: center;
	position: relative;
	top: 0px;
	/* align-self: flex-start; */
}

#srodkowy
{
	display: inline-block;
	background-color: #33AA33;
	color: #FFFFFF;
	width: 45%;
	height: 100%;
	text-align: center;
	position: relative;
	top: 0px;
	/* align-self: flex-start; */
}

#prawy
{
	display: inline-block;
	background-color: #66AA66;
	color: #FFFFFF;
	width: 15%;
	height: 100%;
	text-align: center;
	position: relative;
	top: 0px;
	/* align-self: flex-start; */
}

a
{
	text-decoration: none;
	color: #22FF22;
}

Proszę o pomoc. Dziękuję
M.

1

Coś słabo próbowałeś.
BTW: procenty ci się nie sumują do 100, więc nie wiem, czy chcesz wyśrodkować divy w kontenerze czy sam kontener, więc środkuję jedno i drugie:

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>

#whole {
  display:flex;
  justify-content:center;
  align-items:stretch;
  margin:auto;
  width:400px;
  border:1px solid red;  
}

#whole > DIV {
  color: #FFFFFF;
  text-align: center;  
}

#lew {
  background-color: #66AA66;
  width: 15%;
}

#sro {
  background-color: #33AA33;
  width: 45%;
}

#pra {
  background-color: #66AA66;
  width: 15%;
}
</style>
</head>
<body>

<div id="whole">
    <div id="lew">
    ..:: MENU ::..<br>
    .: O1 :.<br>
    </div>
    <div id="sro">
        <h1>Witaj</h1><br>
    </div>
    <div id="pra">
        blah
    </div>
</div>

</body>
</html>

1 użytkowników online, w tym zalogowanych: 0, gości: 1