0

この html/css コーディングの使用中にレイアウトの問題が発生しました。実際には、シンボルをdivの中心に垂直に揃えたいと思っています。

2 番目のレイアウトは、子 div で左に設定された float 値で正常に表示されます。

最初のレイアウトの何が問題になっていますか。何か案は？

ここにコードがあります

<html>
<head>
<style type="text/css">

    div, p {
        margin:0;
        padding:0;
    }

    div.wrapper {
        background: #FFFFFF;
        border-radius: 3px;
        padding: 20px;
    }

    /* LAYOUT 1 STYLE */
    div.list1 div {
        display: inline-block;
    }

    div.thumb1 {
        border:#3C6BBC 2px solid;
        border-radius: 2px;
        width: 120px;
        height: 120px;
    }

    div.symbol1 {
        font-size: 25px;
        width: 20px;
        height: 70px;
        margin: 2px;
        text-align: center;
        padding-top:50px;
    }

    /* LAYOUT 2 STYLE */
    div.list2 {
        overflow: hidden;
    }

    div.list2 div {
       float: left;
    }

    div.thumb2 {
        border:#3C6BBC 2px solid;
        border-radius: 2px;
        width: 120px;
        height: 120px;
    }

    div.symbol2 {
        font-size: 25px;
        width: 20px;
        height: 70px;
        margin: 2px;
        text-align: center;
        padding-top:50px;
    }

</style>
</head>

<body>

<div class="wrapper" id="layout1">
    <h1>MAIN HEADING</h1>
    <h2>Sub Heading</h2>

    <div class="list1">
        <div class="thumb1"></div>
        <div class="symbol1"><p>+</p></div>
        <div class="thumb1"></div>
        <div class="symbol1"><p>+</p></div>
        <div class="thumb1"></div>
        <div class="symbol1"><p>=</p></div>
        <div class="thumb1"></div>
    </div>
</div>

<div class="wrapper" id="layout2">
    <h1>MAIN HEADING</h1>
    <h2>Sub Heading</h2>

    <div class="list2">
        <div class="thumb2"></div>
        <div class="symbol2"><p>+</p></div>
        <div class="thumb2"></div>
        <div class="symbol2"><p>+</p></div>
        <div class="thumb2"></div>
        <div class="symbol2"><p>=</p></div>
        <div class="thumb2"></div>
    </div>
</div>

</body>
</html>
4

1 に答える 1

0

vertical-align:middle以下のクラスにあなたに与えるだけです

 div.list1 div {
    display: inline-block;
    vertical-align: middle;
}

デモ

于 2012-10-04T09:03:10.937 に答える