Question

这可能很简单，但仍然无法弄清楚......

HTML

<ul>
    <li>
        <a href="/">
            <div class="menuIcons">
                <img src="http://prog.hu/assets/site/text/quicknews/03418/silverlight-boot-by-yanomami--dyn--focus.jpg" width="25" height="25" alt="home icon"><span style="background-color: green;">Home</span>
            </div>
        </a>
    </li>
</ul>

CSS

.menuIcons
{
    display:table-cell;
    background-color: red;
    vertical-align: middle;
    height: 40px;
}

li, img
{
    padding: 0; margin: 0; border: 0;
}

li
{
    background-color: yellow;
}

div
{
    background-color: red;
}

http://jsfiddle.net/AvL9Y/1/

这并非完全集中于所有

Answer 1

http://jsfiddle.net/AvL9Y/9/

浮动元素允许您垂直放置它们，而当您设置行高时文本在元素中间对齐（所以您需要做的就是将文本容器的行高设置为您想要的任何高度 - 25px是你图像的高度，我去了那个）：

.myImage, .text { float: left; display: block; }
.text { line-height: 25px; }

我已将您的HTML略微修改为：

<ul>
    <li>
        <a href="/">
            <div class="menuIcons">
                <img class="myImage" src="http://prog.hu/assets/site/text/quicknews/03418/silverlight-boot-by-yanomami--dyn--focus.jpg" width="25" height="25" alt="home icon" /><div class="text" style="background-color: green;">Home</div>
            </div>
        </a>
    </li>
</ul>

Answer 2

喜欢这个

<强> demo

<强> CSS

.menuIcons {
    display: table-cell;
    background-color: red;
    vertical-align: middle;
    height: 40px;
    background-color: yellow;
}
li, img {
    padding: 0;
    margin: 0;
    border: 0;
    vertical-align: middle;
    text-align: center;
}
li {
    list-style-type: none;
    vertical-align: middle;
    display: inline-block;
    overflow: hidden;
    margin: 0 3px;
}
a {
    display: block;
}
div {
    background-color: red;
    vertical-align: middle;
}
span {
    vertical-align: middle;
    display: block;
}

Answer 3

试试这个

    <ul>
        <li>  <a href="/">    <span class="menuIcons">
                    <img src="http://prog.hu/assets/site/text/quicknews/03418/silverlight-boot-by-yanomami--dyn--focus.jpg" width="25" align="center" height="25" alt="home icon"><span style="background-color: green;">Home</span>
                </span>
            </a>
        </li>
    </ul>

CSS

.menuIcons
{
    display:table-cell;
    background-color: red;
    list-style-type: none;
    vertical-align: middle;
    height: 40px;
}
li, img
{
    padding: 0; margin: 0; border: 0;
}

li
{
   display:block;
    vertical-align:middle;
    background-color: yellow;
}

div
{
    background-color: red;
}

Answer 4

http://jsfiddle.net/AvL9Y/18/

HTML：

<ul>
    <li>
        <a href="/">
            <div class="menuIcons">
                <div class="wrapper">
                <img src="http://prog.hu/assets/site/text/quicknews/03418/silverlight-boot-by-yanomami--dyn--focus.jpg"width="25" height="25" alt="home icon" />
                <div class="text">Home</span>
                </div>    
            </div>
        </a>


    </li>


<li>
    <a href="/">
        <div class="menuIcons">
            <div class="wrapper">
            <img src="http://prog.hu/assets/site/text/quicknews/03418/silverlight-boot-by-yanomami--dyn--focus.jpg"width="25" height="25" alt="home icon" />
            <div class="text">Home</span>
            </div>    
        </div>
    </a>


</li>

CSS：

.menuIcons
{
    display:table-cell;
    background-color: red;
    vertical-align: middle;
     height: 40px;
}

.wrapper{
    display:table;    
}

li,img{
     display:table-cell;    
     vertical-align: middle;    
}

.text{
     background-color: green;   
     display:table-cell;    
     vertical-align: middle;
}

li
{
    background-color: yellow;
    height: 50px;
}

div
{
    background-color: red;
}

在DIV / LI中垂直居中

4 个答案: