CODEWITHSUNDEEP
cssimagevertical-alignment
NiGhMa
NiGhMa

Reputation: 93

CSS image vertical align

I'm trying to align (vertically) a flag in a cell but without success.

here's an example of want I'm trying to do : http://jsfiddle.net/yc6tscto/

Could you tell me what's wrong and how to do it?

<div class="tableCell">

français Nederlands Deutsch

Thank you

Upvotes: 2

Views: 114

Answers (3)

Alex Char
Alex Char

Reputation: 33218

One other solution is without using table-cell technique:

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>

When you have two inline-block elements near each other, you can align each to other's side.

Upvotes: 0

skobaljic
skobaljic

Reputation: 9634

You need flags for each language, make them part of your links this way:

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

Upvotes: 0

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

Try to this Define your

div.tableCell display:table; and define your

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

as like this 

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

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

Demo

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

2nd option please change your html and css according to this, although this is different to what you asked for.

check to this fiddle demo 2

Upvotes: 2

Related Questions