Question

我试图在一个单元格中对齐（垂直）一个标记，但没有成功。

这是我想要做的一个例子：http://jsfiddle.net/yc6tscto/

你能告诉我什么是错的，怎么做？

<div class="tableCell">

françaisNederlandsDeutsch

谢谢

Answer 1

尝试定义

div.tableCell display:table;并定义您的

.image display:table-cell; vertical-align:middle

就像这样

div.tableCell {
    background-color: #e1e1e1; 
    display: table;   
}

.image {
    display: table-cell;
    vertical-align: middle;
}

<强> Demo

--------------

第二个选项请根据此更改您的html和CSS，但这与您要求的不同。

<强> check to this fiddle demo 2

Answer 2

另一个解决方案是不使用table-cell技术：

＆＃13;

div.tableCell {
    background-color: #e1e1e1;
    vertical-align: middle;
    display: table-cell;
    padding: .5rem;
    width: 150px;
}
div.tableCell img {
    display: inline-block;
    vertical-align: middle;
}
div.tableCell a {
    color: inherit;
    text-decoration: none;
    display: block;
    padding-left: 10px;
}
.lnkCont {
    display: inline-block;
    vertical-align: middle;
}
.image {
    display: inline-block;
}

＆＃13;

<div class="tableCell">
    <div class="image">
        <img alt="[BE]" src="http://cdn.masterstudies.com//gfx13/flags/be.png" width="30px" height="20px" />
    </div>
    <div class="lnkCont">
<a href="#" target="_blank">français </a>  <a href="#" target="_blank">Nederlands</a>  <a href="#" target="_blank">Deutsch</a>

    </div>
</div>

＆＃13;

如果两个内联块元素彼此靠近，则可以对齐每个人都到了其他方面。

Answer 3

您需要为每种语言添加标记，以这种方式将它们作为链接的一部分：

<强> HTML

<div class="tableCell">
    <a class="flag flag_fr" href="#" target="_blank">français</a>
    <a class="flag flag_nl" href="#" target="_blank">nederlands</a>
    <a class="flag flag_de" href="#" target="_blank">deutsch</a>
</div>

<强> CSS

div.tableCell {
    background-color: #e1e1e1;
    vertical-align: middle;
    display: table-cell;
    padding: .5rem;
    width: 150px;
}
.flag {
    color: inherit;
    text-decoration: none;
    display: block;
    padding-left: 30px;
    line-height: 1.3em;
}
.flag:hover,
.flag:focus {
    background-color: #ccc;
}
.flag_fr {
    background: url('http://www.translatorscafe.com/cafe/images/flags/FR.gif') no-repeat 4px center;
}
.flag_de {
    background: url('http://www.translatorscafe.com/cafe/images/flags/DE.gif') no-repeat 4px center;
}
.flag_nl {
    background: url('http://www.translatorscafe.com/cafe/images/flags/NL.gif') no-repeat 4px center;
}

CSS图像垂直对齐

3 个答案:

--------------