利用vertical-align屬性實現分隔符

時間 2020-04-05

標籤利用 vertical align 屬性實現分隔符简体版

原文原文鏈接

　　網頁設計中常常用到標題之間的分隔符的樣式，即用短豎線分隔幾個關鍵詞，最近發現了一種簡單可行的方式，即經過vertical-align屬性來實現分隔符樣式，在這邊分享給你們：html

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
    div {
      height: 60px;
      border: 2px solid orange;
    }
    span {
      display: inline-block;
      vertical-align: middle;
      height: 100%;
      background-color: red;
      font-size: 30px;
      line-height: 60px;
    }
    i {
      display: inline-block;
      vertical-align: middle;
      width: 2px;
      height: 30px;
      margin: 0 10px;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div>
    <span>牀前明月光</span><i></i><span>疑是地上霜</span><i></i><span>舉頭望明月</span><i></i><span>低頭思故鄉</span>    
  </div>
</body>
</html>

　　這裏的背景色和邊框只是便於看出字體和父元素區域，能夠直接去除，可經過調整<i>標籤的高度（百分比也可）和樣式來改變分隔符的樣式。須要注意的是這些字的line-height和font-size屬性須要在span中設置，若是在父元素中設置的話有可能會致使span和i標籤的總體位置偏離出div，影響到頁面佈局。關於這點可參考http://www.javashuo.com/article/p-hnuxoslu-ey.html佈局

1. 千位分隔符實現
2. 用 js 實現千位分隔符
3. js 實現千位分隔符
4. 千位分隔符(js 實現)
5. sqlserver實現分隔字符串
6. JS 實現千位分隔符
7. c/c++實現字符串分隔split
8. js實現千位分隔符
9. JS實現千位分隔符
10. 數字的千位分隔符實現
更多相關文章...
• ASP.NET TableRow VerticalAlign 屬性 - ASP.NET 教程
• 現實生活中的 XML - XML 教程
• ☆基於Java Instrument的Agent實現
• Docker容器實戰(六) - 容器的隔離與限制

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。