阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      CSS 实现文字垂直排列并居中

      方法 1、是自己挤出来的,用 2 个 DIV 实现,以前一直这么搞的,CSS 没人交流,所以一直按照最笨的来;

      今天学到一个新的方法;瞬间高大上;

      方法 2:加入下面两行就可以了;需要固定宽度;

          display:table-cell;
          vertical-align:middle;
      

      一起的代码如下:

      <!DOCTYPE html>
      <html>
      <head lang="en">
          <meta charset="UTF-8">
          <title></title>
          <style>
              #div1{
                  background: #990000;
                  width: 36px;
              }
              #div2{
                  font-size: 18px;
                  width: 18px;
                  background: red;
                  margin: 0 auto;
                  padding: 10px 0;
              }
              #div3{
                  width: 50px;
                  font-size: 28px;
                  background: orange;
                  text-align: center;
                  display:table-cell;
                  vertical-align:middle;
                  padding: 10px 0;
              }
          </style>
      </head>
      <body>
      <!--两个DIV的方法-->
      <div id="div1">
          <div id="div2">朱安邦朱安邦朱安邦</div>
      </div>
      <br/>
      <!--一个DIV的方法-->
      <div id="div3">叫我朱哥叫我朱哥叫我朱哥</div>
      </body>
      </html>
      
      

      vertical-align这个属性只是针对于行内块标签起作用;

      行内快就是,既有行内元素的特性也有块级元素的特性:可以一行显示多个,同时又具有宽高;

      标签分三种,行内元素,行内块元素,块级元素

      目录
      本文目录
      目录