css系列---【如何讓文字水平垂直居中？】

本文轉載自查看原文 2020-05-23 11:29 1463 css

1.如何讓文字水平垂直居中？

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>css練習</title>
    <style>
      a {
          /* 行內元素轉行內塊級元素,因為行內元素無法改變寬高,若想改變,必須先轉成行內塊級元素 */
        display: inline-block;
        width: 70px;
        /* 行高等於高度，文字才會垂直居中 */
        height: 30px;
        line-height: 30px;
        background-color: aqua;
        /* 去掉下划線 */
        text-decoration: none;
        /* 設置水平居中 */
        text-align: center;
      }
      /* 鼠標滑過效果 */
      a:hover {
        color: #ff00ff;
        background-color: #fff;
      }
    </style>
  </head>
  <body>
    <a href="#">新聞</a>
    <a href="#">體育</a>
    <a href="#">新浪</a>
  </body>
</html>

2.如何測試行高？

ps中有個切片工具

免責聲明！

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

猜您在找 微信小程序文字水平垂直居中對齊問題 CSS實現文字和圖片的水平垂直居中 css文字如何垂直居中？ CSS 水平居中與垂直居中 CSS3：圖片水平垂直居中 CSS布局對齊方式--水平居中、垂直居中、水平垂直居中 CSS 實現盒子水平居中、垂直居中和水平垂直居中的方法 css圖片居中(水平居中和垂直居中) css_css 盒子水平居中垂直居中 css 圖片文字垂直居中