li 標簽中放a 標簽,文字垂直居中


 <ul style="float:left"><li  class="lili">
                <a href="Left.aspx?type=214" target="leftFrame" class="imageA"><span style="Letter-spacing :1px;  position:relative; color:#900;">對標系統</span></a>
               </li>
               <li  class="lili">
                <a href="Left.aspx?type=225" target="leftFrame" class="imageA"><span style="Letter-spacing :1px; position:relative; color:#900;">績效考核</span></a>
               </li>
               <li  class="lili">
                <a href="Left.aspx?type=235" target="leftFrame" class="imageA"><span style="Letter-spacing :1px; position:relative; color:#900;">內部數據</span></a>
               </li>
               <li  class="lili">
                <a href="Left.aspx?type=239" target="leftFrame" class="imageA"><span style="Letter-spacing :1px; position:relative; color:#900;">外部數據</span></a>
               </li>
               <li  class="lili">
                <a href="Left.aspx?type=59" target="leftFrame" class="imageA"><span style="Letter-spacing :1px; position:relative; color:#900;">系統管理</span></a>
               </li>
               </ul> 

  上面這段代碼中,想讓a標簽中的文字居中,需要設置li標簽的line-height 和height屬性;

<style type="text/css">
.imageA
{
	background-image:url(../App_Themes/DefaultTheme/images/top_nav.jpg);
	background-repeat:no-repeat;
	display:block;
	width:110px;
	height:29px;
	 text-align:center;
	 font-size:14px;
	  color:#900;
	 font-weight:bold; 
	  
	}
	.lili
	{
		display:block;
	width:110px;
	height:29px;
	line-height:31px;
	float:left
		}
</style>

  有時候li 標簽 水平顯示(style=“float:left”),它的外面一層 的高度可能比它高一些。為了讓它里面的a標簽的文字居中,就需要把它的行高設置成和它外層的行高一樣高就可以了!


免責聲明!

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



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM