Question

使用此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>

Answer 1

只需将vertical-align:middle提交给您提到的下面的课程

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

<强> Demo

如何正确使用CSS“display：inline-block”？

1 个答案: