简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
li标签中的span标签如何垂直居中？
男神
男神 2017-02-23 09:39:37
0
3
1569

正常情况下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>
男神
男神

╰つ ゛思 绪 万 千 , 不 如 努 力 向 前 .ヽ

모든 응답(3)
数据分析师
数据分析师2017-10-01 00:28:47 3층

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

꼭 보고 배워보세요.

좋다 +0
답글 추가
阿神
阿神2017-02-23 09:41:01 2층

 在原有基础上添加

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 1층

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

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

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


좋다 +0
답글 추가
인기 주제
더>
인기 기사
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！