垂直对齐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

回答

相关问题