0

我在使用这个 html/css 编码时遇到了布局问题。实际上我希望符号垂直对齐到 div 的中心。

第二种布局显示良好，浮动值设置为子 div 上的左侧。

第一个布局有什么问题。有任何想法吗？

这是代码

<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 回答