>  Q&A  >  본문

li标签中的span标签如何垂直居中?

正常情况下li标签中的span标签可以通过设置li标签的height和line-height一致来实现span标签在li标签中的垂直居中,但是我发现当把span标签display属性设置为block,并设置尺寸以后,这个方法就无效了,使用vertical-align:middle也没用,请问为什么?代码如下:

<!DOCTYPE html><html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
      li{        height: 30px;        line-height: 30px;        border: 1px solid red;      }
      span{        display: block;        width: 30px;        height: 20px;        border: 1px solid blue;      }
    </style>
  </head>
  <body>
    <ul>
      <li><span>abcdefg</span></li>
      <li><span>abcdefg</span></li>
      <li><span>abcdefg</span></li>
    </ul>
  </body></html>
男神男神2794일 전1566

모든 응답(3)나는 대답할 것이다

  • 数据分析师

    数据分析师2017-10-01 00:28:47

    li 태그에서 스팬 태그를 수직 중앙에 배치하는 방법은 무엇입니까? -PHP 중국어 사이트 Q&A - li 태그에서 스팬 태그를 수직 중앙에 배치하는 방법은 무엇입니까? -PHP 중국어 홈페이지 Q&A

    꼭 보고 배워보세요.

    회신하다
    0
  • 阿神

    阿神2017-02-23 09:41:01

     在原有基础上添加

    li{
    position:relative;
    }
    span{
    position:absolute;
    margin:auto;
    left:0;
    right:0;
    top:0;
    bottom:0;
    }

    原理是,定位元素(以竖直方向为例)的top+bottom+其自身高+竖直margin=包含块尺寸。由于只有margin未设置具体值,则自动计算为居中。 

    회신하다
    0
  • 迷茫

    迷茫2017-02-23 09:40:08

    height和line-height一致的方式只能作用于inline和inline-block的元素

    vertical-align:middle只能作用于inline和table类元素

    题主只要把span标签的display设置为inline-block就行了


    회신하다
    0
  • 취소회신하다