问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

css的vertical-align为啥无效呀？

头像
swnuv
    3.9k789601510

    图片描述

    <!DOCTYPE html>
<html>
<head>
    <title>商城促销信息图文混排</title>
    <style type="text/css">
        .inline_block{
            display:inline-block;
        }
        body{
            text-align: center;
        }
        .div_3{
            vertical-align:middle;
        }
    </style>
</head>
<body>
    <div>
        <h1>促销信息</h1>
        <div class="div_1">
            <div class="inline_block div_2">
                <img src="img_1.jpg" title="iphone x">
            </div>
            <div class="inline_block div_3">
                <p>拍卖iPhone x</p>
                <p>Phone X 带来了全面屏新设计、能以你的脸作为密码的面容 ID 功能，以及 iPhone 迄今最强大、最智能的芯片。</p>
                <p>价格8000元</p>

            </div>
        </div>

    </div>

</body>
</html>
    cssjavascripthtml
    阅读 7.6k
    6 个回答
    得票最新
    头像
    小肚腩gg
      1561
      ✓ 已被采纳

      楼主 你的做法是对的 只需再在图片的那个div 也加一个vertical-align:middle;就可以了

      头像
      zonxin
        12.1k2632

        table cell才有vertical-algin

        所以要display:table-cell

        头像
        smallmarkone
          1831510
          头像
          白吟灵
            2k1315

            vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。
            这种问题，翻翻文档不就知道了？

            头像
            MoXuan
              9251220

              .div_3{

                      display: table-cell;
        vertical-align:middle;
    }
              头像
              shalles
                1353

                同行内较高的元素会把父极的高撑开，vertical middle需要设给行内撑起较高的元素, 使其基线相对保持在较高元素中间,以达到需求。

                撰写回答
                你尚未登录，登录后可以
                • 和开发者交流问题的细节
                • 关注并接收问题和回答的更新提醒
                • 参与内容的编辑和改进，让解决方法与时俱进
                推荐问题