CSS3 box-align js 实例 - 自学教程(runoops.com)

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS3 box-align js 实例 - 自学教程(runoops.com)</title>
    <style>
        .box {
            display: -ms-flexbox;
            display: -moz-box;
            display: -webkit-box;
            display: box;
            width: 200px;
            height: 100px;
            border: 2px solid red;
        }
    </style>
    <script>
        function ChangeBoxAlign(x) {
            // Returns the selected option's text
            var boxAlign = x.options[x.selectedIndex].text;
            var div = document.getElementById("myDiv");
            if (div.style.MozBoxAlign !== undefined) {
                div.style.MozBoxAlign = boxAlign;
            }
            else if (div.style.webkitBoxAlign !== undefined) {
                div.style.webkitBoxAlign = boxAlign;
            }
            else if (div.style.msFlexAlign !== undefined) {
                div.style.msFlexAlign = boxAlign;
            }
            else {
                alert("Your browser doesn't support this example!");
            }
        }
    </script>
</head>

<body>
    <div class="box" id="myDiv">
        <b>first child</b>
        <i>second child</i>
    </div>

<select onchange="ChangeBoxAlign (this);" size="6">
        <option selected="selected" />baseline
        <option />center
        <option />end
        <option />inherit
        <option />start
        <option />stretch
    </select>

<p><b>注意:</b> 这个实例在 Opera,或 Internet Explorer 9以及更早版本的浏览器中不兼容</p>

</body>

</html>