垂直對齊SPAN與UL

我有以下的HTML（Example）：垂直對齊SPAN與UL

<span>Sign in with</span> 
<ul> 
    <li><a href="#"><i class="icon-facebook"></i></a></li> 
    <li><a href="#"><i class="icon-twitter"></i></a></li> 
</ul>

而CSS：

span { 
    display: inline-block; 
    font-weight: bold; 
    margin-right: 6px; 
} 

ul { 
    display: inline-block; 
    list-style: none; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 

ul li { 
    display: inline-block; 
    list-style: none; 
    list-style-type: none; 
    margin: 0; 
    padding: 4px; 
} 

ul li { 
    font-size: 2.0rem; 
}

我想SPAN與圖標的UL垂直對齊。但即使應用填充來跨越，我也無法做到這一點。

關於如何解決這個問題的任何想法？

來源

2016-09-30 Miguel Moura

可能重複[如何垂直居中文本與CSS？]（http://stackoverflow.com/questions/8865458/how-to-vertically-center-text-with-css） – isherwood

添加vertical-align:middle您<i>元素：

span { 
 
    display: inline-block; 
 
    font-weight: bold; 
 
    margin-right: 6px; 
 
} 
 
ul { 
 
    display: inline-block; 
 
    list-style: none; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
ul li { 
 
    display: inline-block; 
 
    list-style: none; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 4px; 
 
} 
 
ul li { 
 
    font-size: 2.0rem; 
 
} 
 
i[class^="icon-"] { 
 
    vertical-align: middle; 
 
}

<link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet" /> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" /> 
 

 
<span>Sign in with</span> 
 
<ul> 
 
    <li><a href="#"><i class="icon-facebook"></i></a> 
 
    </li> 
 
    <li><a href="#"><i class="icon-twitter"></i></a> 
 
    </li> 
 
</ul>

來源

2016-09-30 17:34:55 j08691

你可以試試這個

HTML：

<p>Sign in with</p> 
    <ul>   
     <li><a href="#"><i class="icon-facebook"></i></a></li> 
     <li><a href="#"><i class="icon-twitter"></i></a></li> 
    </ul>

來源

2016-09-30 17:31:54

現在檢查代碼。這是使文本與圖標垂直對齊的方法之一。 :) –

試試這個，

span { 
    display: inline-block; 
    font-weight: bold; 
    margin-right: 6px; 
    vertical-align:middle; /* added */ 
} 

ul { 
    display: inline-block; 
    list-style: none; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    vertical-align:middle; /* added */ 
} 

ul li { 
    display: inline-block; 
    list-style: none; 
    list-style-type: none; 
    margin: 0; 
    padding: 4px; 
} 

ul li { 
    font-size: 2.0rem; 
}

來源

2016-09-30 17:41:48

垂直對齊SPAN與UL

回答

相關問題