Korzystanie z flexbox mam ten prosty przykład ..

.container {
   display:flex;
   flex-direction:column;
   align-items:center;
   justify-content:center;
   height:100vh;
}

.box1{height:100%;background:green;}
.box2{height:100%;background:red;}
.box3{height:100%;background:yellow;}
<div class="container">
    <div class="box1">
        <img src="https://dummyimage.com/100x100/000/fff">
    </div>
    <div class="box2">
        This is some dummy text
    </div>
    <div class="box3">
        <img src="https://dummyimage.com/100x100/0020/66t">
    </div>
</div>

https://jsfiddle.net/y07xr5q3/1/

Chciałbym zawartość każdego DIV, aby być wyśrodkowanym pionowo, czy to coś, co powinno być wykonane za pomocą standardowych technik CSS, czy jest jakiś specyficzny sposób, aby to zrobić?

0
fightstarr20 17 luty 2017, 16:32

1 odpowiedź

Spróbuj tego

.container {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  height:100vh;
}
.box1, .box2, .box3 {
	display: flex;
	align-items: center;
}
.box1{height:100%;background:green;}
.box2{height:100%;background:red;}
.box3{height:100%;background:yellow;}
<div class="container">
    <div class="box1">
        <img src="https://dummyimage.com/100x100/000/fff">
    </div>
    <div class="box2">
        This is some dummy text
    </div>
    <div class="box3">
        <img src="https://dummyimage.com/100x100/0020/66t">
    </div>
</div>

Live Demo https://jsfiddle.net/grinmax_/y07xr5q3/4/

1
grinmax 17 luty 2017, 14:02