CSS图像垂直对齐答案

【问题标题】：CSS image vertical alignCSS图像垂直对齐
【发布时间】：2014-11-30 17:12:13
【问题描述】：

我正在尝试（垂直）对齐单元格中的标志，但没有成功。

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

你能告诉我出了什么问题以及如何解决吗？

<div class="tableCell">

法语荷兰德语

谢谢

【问题讨论】：

标签： css image vertical-alignment

【解决方案1】：

试试这个定义你的

div.tableCelldisplay:table; 并定义你的

.imagedisplay: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

【讨论】：

谢谢。第一个解决方案有效。但总的来说，我必须将链接和标志分开。谢谢大家

【解决方案2】：

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

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;
}

<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>

当你有两个相邻的 inline-block 元素时，你可以对齐彼此站在对方的一边。

【讨论】：

【解决方案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;
}

【讨论】：