css 3 box-packとbox-alignを設定してdivの中の要素を垂直に中央にします

4314 ワード


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style type="text/css">
    #container{
    display: box;
    display: -webkit-box;
    display: -moz-box;
    width:800px;
    height: 200px;
    border: 1px solid #ccc;
    -webkit-box-pack:center;
    -moz-box-pack:center;
    -webkit-box-align:center;
    -moz-box-align:center;
    }
    #div1{
    background: orange;
    }
    #div2{
    background: yellow;
    }
    #div3{
    background: green;
    }
    style>
head>
<body>



    <div id="container">
    <div id="div1"> 1div>
    <div id="div2"> 2div>
    <div id="div3"> 3div>
    div>


body>
html>