CODEWITHSUNDEEP
htmlcss
Liam
Liam

Reputation: 9855

Horizontally align table cell element

I have a table cell element Im trying to align horizontally and vertically but I'm only managing to get 1 to work and thats the vertical alignment.

The images have no set size so it has to be fluid and work with a max-height, width...

CSS

.prod-img {
  display: block;
  margin: 20px; 
  border:1px solid black;
}
.prod-img a {
  max-width: 170px;
  height: 150px;
  display: table-cell;
  vertical-align: middle;
}
.prod-img img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  max-height: calc(100% - 30px);
  margin: 0 auto;
}

http://jsfiddle.net/mjx4xvgj/1/

Upvotes: 0

Views: 4989

Answers (3)

Harsh Sanghani
Harsh Sanghani

Reputation: 1712

Just change your CSS with the following, you got your output:

.prod-img {
    display: table;
    margin: 20px; border:1px solid black;
    width : 100%;
}
.prod-img a {
    max-width: 170px;
    height: 150px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.prod-img img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    max-height: calc(100% - 30px);
    margin: 0 auto;
}

It may help you.

Upvotes: 2

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

Using correct display:

  • Using margin: auto and display: block for <a>.
  • Using display: inline-block for <img />

Code:

.prod-img {
  display: block;
  margin: 20px; border:1px solid black;
  text-align: center;
  vertical-align: middle;
}
.prod-img a {
  max-width: 170px;
  height: 150px;
  line-height: 150px;
  display: block;
  vertical-align: middle;
  margin: auto;
}
.prod-img img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  max-height: calc(100% - 30px);
  margin: 0 auto;
  vertical-align: middle;
}

Preview:

Fiddle: http://jsfiddle.net/1zLLasfw/

Upvotes: 3

Anubhav pun
Anubhav pun

Reputation: 1323

use this in style may help you

.prod-img {
    border: 1px solid #000000;
    display: table;
    margin: 20px;
    width: 100%;
}
.prod-img a {
    display: table-cell;
    height: 150px;
    max-width: 170px;
    text-align: center;
    vertical-align: middle;
}

Upvotes: 0

Related Questions