14-vertical-aligin

自由的代价很贵發表於2024-06-21

01 行盒的理解

作用: 將當前行裡的所有內容包裹起來

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box .small {
      display: inline-block;
      width: 200px;
      height: 200px;
      background-color: orange;
    }
    .box img {
      width: 200px;
    }
  </style>
</head>
<body>
  <div class="box">
    xxxxgggx123
    <img src="./imgs/diqiu.jpg" alt="">
    <span class="small"></span>
    每逢春節、中秋節等中華民族傳統節日，各族居民便聚在一起，聯歡聯誼，共慶佳節；每逢開齋節、古爾邦節等少數民族節日，回族居民會帶著油香、饊子等特色小吃，請街坊鄰里品嚐，各族居民其樂融融，像石榴籽一樣緊緊抱在一起。
  </div>
</body>
</html>
image

02 行盒裡面對齊的方式

瀏覽器為了美觀,預設行盒的對其方式是基線對齊
image
這也就能解釋為什麼單獨放一張圖片的時候,圖片下方會有幾個畫素
image
這是因為只有圖片的時候也是按照基線對齊,為了以後可能有文字,預留了空間
還有一種現象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      background-color: orange;
    }
    .box .small {
      display: inline-block;
      width: 200px;
      height: 200px;
      background-color: red;
    }
    .box img {
      width: 100px;
    }
  </style>
</head>
<body>
  <div class="box">
    123xxggg
    <img src="./imgs/diqiu.jpg" alt="">
    <span class="small">aaaaa</span>
  </div>
</body>
</html>
image 也是因為基線對齊的原因，因為span裡有了文字,所以基線變成了文字的底部，就會發生如上圖的現象了

03 案例

3.1 vertical-algin解決問題一

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 瀏覽器遇到行內和行內塊標籤當做文書處理, 預設文字是按基線物件 */
    input {
      height: 50px;
      box-sizing: border-box;

      vertical-align: middle;
    }

  </style>
</head>
<body>
  <input type="text"><input type="button" value="搜尋">
</body>
</html>
image

3.2 vertical-algin解決問題二

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
   img {
     vertical-align: middle;
   }
  </style>
</head>
<body>
  <img src="../imgs/1.jpg" alt=""><input type="text">
</body>
</html>
image

3.3 vertical-algin解決問題三

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      width: 400px;
      height: 400px;
      background-color: pink;
    }

    input {
      /* vertical-align: middle; */
      vertical-align: top;
    }

  </style>
</head>
<body>
  <div class="father">
    <input type="text">
  </div>
</body>
</html>
image

3.4 vertical-algin解決問題四

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      width: 400px;
      background-color: pink;
    }

    img {
      /* 瀏覽器把行內和行內塊標籤當做文書處理,預設基線對齊 */
      /* vertical-align: middle; */
      display: block;
    }

  </style>
</head>
<body>
  <div class="father">
    <img src="../imgs/1.jpg" alt="">
  </div>
</body>
</html>
image