inline,inline-block 水平方向無法對齊

本文轉載自查看原文 2020-02-20 11:10 752 CSS疑難雜症/ inline-block

生命中最善良的時光, 就像水一樣明亮, 記憶里總有人在坐在身旁,撫摸着我枯萎的肩膀,對我說紅色不該遺忘。

問題描述

1. 圖片與文本同時存在，無法精准對齊的情況
2. inline-block的空標簽與圖片或文本同時存在，無法對齊的情況

如下圖:

解析

關於對齊先了解造成此影響的CSS屬性 vertical—align 
    此場景下常用的可選值： baseline  基線, top 頂線, middle 中線, bottom 底線

1. inline文本元素默認對齊方式為baseline, 其基線位置為文本x的底線
2. inline-block空元素對齊方式為邊框下邊緣

    純文本的情況, 針對以上四個屬性，以英文書寫習慣來看，x底線即為基線位置 g下邊緣為底線位置，h上邊緣即為頂線位置

如下圖示意
vertical—align

  回到開始的問題
    問題一：
        圖片與文本共存時，存在不對齊的情況是由於默認為基線對齊，即文本x位置與圖片下邊緣對齊，
    而文本基線與元素底部是有一定距離的，所以造成了不對齊的現象
    問題二：
        文本與空標簽共存時，存在不對齊的情況是由於默認為基線對齊，即文本x位置與空的inline-block元素邊框下邊緣對齊
    元素height設置不同，以及文本基線與元素底部是有一定距離的，所以造成了不對齊的現象

    針對以上，
        設置兩者元素的對齊方式即可
    vertical—align 非基線對齊

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 inline-block元素水平居中問題兩個div並列居中顯示——當display:inline-block;時，兩個div無法對齊即一高一矮 block，inline和inline-block概念和區別 CSS： inline、block和inline-block的區別 display:inline、block、inline-block的區別 display: inline、block、inline-block、flex和inline-flex 關於display:inline-block的元素不在同一水平線 css學習--inline-block詳解及dispaly:inline inline-block block 三者區別精要概括 display:inline-block，block，inline的區別與用法 css(二) block，inline和inline-block概念和區別