鍍金池/ 問答/HTML/ css的vertical-align為啥無效呀？

css的vertical-align為啥無效呀？

圖片描述

<!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 帶來了全面屏新設(shè)計、能以你的臉作為密碼的面容 ID 功能，以及 iPhone 迄今最強大、最智能的芯片。</p>
                <p>價格8000元</p>

            </div>
        </div>

    </div>

</body>
</html>
回答
編輯回答
不舍棄

vertical-align 用來指定行內(nèi)元素（inline）或表格單元格（table-cell）元素的垂直對齊方式。
這種問題，翻翻文檔不就知道了？

2018年5月10日 19:24
編輯回答
哚蕾咪

.div_3{

        display: table-cell;
        vertical-align:middle;
    }
2017年3月5日 02:06
編輯回答
練命

table cell才有vertical-algin

所以要display:table-cell

2017年12月30日 15:14
編輯回答
命多硬

同行內(nèi)較高的元素會把父極的高撐開，vertical middle需要設(shè)給行內(nèi)撐起較高的元素, 使其基線相對保持在較高元素中間,以達到需求。

2017年3月11日 16:39
編輯回答
有點壞

樓主 你的做法是對的 只需再在圖片的那個div 也加一個vertical-align:middle;就可以了

2018年5月25日 13:19
編輯回答
大濕胸

這樣的......

.div_2{vertical-align:middle;}

CSS vertical-align 屬性

2017年7月5日 03:06