CODEWITHSUNDEEP
htmlcss
Ivanka Todorova
Ivanka Todorova

Reputation: 10219

Center text vertically with an image

I have this code and the text is properly centered.

HTML

<div class="holder">
    <img src="http://placehold.it/100x150/" style="float: left;" />
    <a href="#" class="centered"> some text</a>
</div>

CSS

.holder {
    border: 1px solid red;
    padding: 10px;
    width: 300px;
    display: table;
}
a {
    display: table-cell;
    vertical-align: middle;
}
img {
    width: 100px;
}

http://jsfiddle.net/2P8Yj/1/

How can I make the text aligned to left, next to the image?

enter image description here

Upvotes: 0

Views: 74

Answers (8)

Teknotica
Teknotica

Reputation: 1136

Set your anchor to 100% and add some padding if needed:

a {  
    display: table-cell;
    vertical-align: middle; 
    width: 100%; 
    padding-left: 15px; 
   }

Demo: http://jsfiddle.net/2P8Yj/20/

Upvotes: 1

SSS
SSS

Reputation: 1025

Try this http://jsfiddle.net/2P8Yj/18/

I have added the display: table to body the css is as follows

      body{display:table}
      .holder { border: 1px solid red; padding: 10px; width: 300px;display: table-row;}
      a {  display: table-cell;
         vertical-align: middle;  }
      img { width: 100px;}

Instead of body you can have one more div above it.

Upvotes: 1

Ex-iT
Ex-iT

Reputation: 1477

Not sure if changing the display: table-cell; to display: inline-block; is ok in your situation.

But you can accomplish the same effect with this:

a {
    display: inline-block;
    vertical-align: middle;
}
img {
    width: 100px;
    display: inline-block;
    vertical-align: middle;
}

Demo

Upvotes: 0

Robin
Robin

Reputation: 1216

You could put img and a each in a cell to create a "proper" table:

HTML:

<div class="holder">
    <div class="cell">
        <img src="http://placehold.it/100x150/" style="float: left;" />
    </div>
    <div class="cell">
        <a href="#" class="centered"> some text</a>
    </div>
</div>

CSS:

.holder {
    border: 1px solid red;
    padding: 10px;
    width: 300px;
    display: table;
}

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

.cell:nth-child(1) {
    width:105px; /*just to show, better to use padding for second cell*/
}

img {
    width: 100px;
}

http://jsfiddle.net/2P8Yj/13/

Upvotes: 0

Drogon
Drogon

Reputation: 360

Try this JsFiddle: JsFiddle

This are the changes in your CSS, notice the height I have added to the .holder and the line-height to your a:

.holder { 
    border: 1px solid red; 
    padding: 10px; 
    width: 300px;
    height:150px;
    display: block;
}

a {  
    line-height:150px;
    padding-left:20px;
}

img { 
    width: 100px;
}

Upvotes: 0

Arko Elsenaar
Arko Elsenaar

Reputation: 1729

Add a width to your a:

a {
    display: table-cell;
    vertical-align: middle;
    width:200px;
}

DEMO HERE

Upvotes: 2

Eligijus
Eligijus

Reputation: 643

flaot:left; might solve your problem.

Upvotes: -1

SaturnsEye
SaturnsEye

Reputation: 6499

You could add position:relative and left:-80px to your text CSS.

EXAMPLE

Upvotes: -1

Related Questions