CODEWITHSUNDEEP
htmlcsslayout
xylar
xylar

Reputation: 7663

Center an img taking into account the img height

Is it possible to center an image in a div, taking into account the height of the image.

HTML

<div class="holder">
    <h3>Article 1</h3>
    <div class="tl">
        <img src="http://placehold.it/144x70"/>
    </div>
    <p>Text 1</p>
    <p>Text 2</p>
    <div class="foot">
        <h4>Author</h4>
    </div>
</div>

<div class="holder">
    <h3>Article 2</h3>
    <div class="tl">
        <img src="http://placehold.it/144x50"/>
    </div>
    <p>Text 1</p>
    <p>Text 2</p>
    <div class="foot">
        <h4>Author</h4>
    </div>
</div>

<div class="holder">
    <h3>Article 3</h3>
    <div class="tl">
        <img src="http://placehold.it/100x15"/>
    </div>
    <p>Text 1</p>
    <p>Text 2</p>
    <div class="foot">
        <h4>Author</h4>
    </div>
</div>

CSS:

.holder {
    width: 144px;
    height: 215px;
    float: left;
    margin: 10px 10px 50px 10px;
    padding: 2px;
    border: 1px solid #000;
    position: relative;
}

h3 {
    margin: 4px 0 20px 0;
}

h4, p{
    margin: 0;
}

h3, h4, p {
    text-align: center;
}

.tl {
    text-align: center;
    height: 100px;
    position: relative;
    top: 12%;
    transform: translateY(-12%);
}

p {
    padding: 0 3px;
    line-height: 18px;
}

.foot {
    width: 144px;
    position: absolute;
    top: 197px;
}

I have made a jsfiddle here: https://jsfiddle.net/abn94Ldo/1/

I would like the centre point of all the images to line up so the text in each img placeholder (144x70 etc) is in line.

example

Upvotes: 1

Views: 57

Answers (4)

QArea
QArea

Reputation: 4981

Try this: https://jsfiddle.net/abn94Ldo/3/

.tl {
       vertical-align: middle;
       display: table-cell;
       text-align: center;
       margin-bottom: 30px;
       height: 70px;
       position: relative;
       top: 12%;
       transform: translateY(-12%);
       width: 144px;
       margin: 0 auto;
}

Upvotes: 0

Vinod Kumar
Vinod Kumar

Reputation: 981

You can achieve this by two methods [by the way remove the top value for .tl div],

  1. Make img position:absolute and set all the sides to 0 and margin:auto.

    img{
    position:absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin:auto;
}

Refer to jsfiddle Link

  1. To make the tl as display:table; and add a child with display:table-row and another inside with display:table-cell; Now you will be able to make the image position center by using vertical-align: middle;

Refer to jsfiddle Link

Upvotes: 3

stanze
stanze

Reputation: 2480

Using positioning aligning image in middle. Demo

.tl img{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

Upvotes: 0

Shikkediel
Shikkediel

Reputation: 5205

I would use a transform :

img {
position: relative;
top: 50%; // vertical placement according to preference
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}

https://jsfiddle.net/draquL3p/

Both absolute positioning and a table layout seem a bit hacky (although commonly used). My own choice would be to use them only when legacy browser support is required.

Upvotes: 2

Related Questions