鍍金池/ 問答/HTML5  HTML/ 這種圖片垂直居中對齊是什么原理？

這種圖片垂直居中對齊是什么原理？

<!DOCTYPE html>
<html>
<head>

<title></title>

</head>
<body>
<div style="text-align: center; width: 500px;height:200px; line-height:200px; border: green solid 1px;">
<img alt="" src="https://www.baidu.com/img/bai...; style="display: inline-block; vertical-align: middle;" />
</div>
</body>
</html>

1、在父元素上設(shè)置行高（一般不應(yīng)該都是設(shè)置子元素行高等于父元素高嗎，圖片可能沒有行高所以無效？）
2、img中設(shè)置vertical：middle！在w3c的說明中如下圖圖片描述

上面寫按照該元素所在行的基線垂直對齊，下面又說把次元素放置在父元素的中部！（單獨在img上寫vertical-align不能垂直居中）

我已經(jīng)迷茫了！所以這個line-height和vertical-align到底是怎么用！

ps、其它的什么display：table；和絕對定位之類的不用和我說了。我知道！我只想知道上面這代碼怎么解釋~

回答
編輯回答
青裙

這個vertical-align需要多個元素才能實現(xiàn)居中效果，單個元素是不起作用的，并且是inline-block

比如：

<style>
    .box i{ display:inline-block; width:10px; height:100px; background:red; vertical-align:middle; }
    .box img{ vertical-align:middle; }
</style>
<div class="box">
    <i></i>
    <img>
</div>

這樣的話，圖片和i標簽是垂直居中的

利用這個原理，可以簡化一下，用偽元素來實現(xiàn)垂直居中

<style>
    .mfix:before{content:'';display:inline-block; width:0; height:100%; vertical-align:middle;}
    .mfix>*{display:inline-block;vertical-align:middle;}
</style>
<div class="box mfix">
    <img>
</div>

給父級加一個mfix類名就可以實現(xiàn)子元素垂直居中了

完整demo代碼

https://codepen.io/xboxyan/pe...

2018年7月3日 03:10