How to make this div always align center?

Question

I would like to make the div class ty-product-block__wrapper align in the center (Horizontally) for all devices. The image used is for illustrative purposes only. I have been trying to figure it out for a while and I can't get it to work. Here is the jsfiddle: https://jsfiddle.net/6txxshk9/

HTML

<div class="ty-tygh">
<div class="ty-helper-container">
  <div class="row-fluid">
    <div class="span16">
      <div class="ty-product-block">
        <div lcass="ty-product-block__wrapper">
          <img src="http://blogsbucket.com/wp-content/uploads/2015/09/google-dk-flat.png">
        </div>
      </div>
    </div>
  </div>
</div>

CSS

div {display: block;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  font-size: 0;
}
.ty-tygh {
  box-sizing: border-box;
}
.ty-helper-container {
  position: relative;
}
.row-fluid {
  width: 100%;
}
.row-fluid .span16 {
  width: 100%;
}
.row-fluid [class*="span"] {
  display: block;
  box-sizing: border-box;
  box-sizing: border-box;
  float: left;
}
.ty-product-block {
  margin: 0 0 30px 0;
  position: relative;
}
.ty-product-block__wrapper {
  background: #fff;
  padding-top: 20px;
}

maybe simply: https://jsfiddle.net/6txxshk9/10/ (display:table turns it into a block element shrinking/expanding according to its content. margin:auto; centers it if less than 100% width :) — G-Cyrillus, Dec 07 '15 at 00:21

Praveen Kumar Purushothaman · Answer 1 · 2015-12-07T00:16:05.100

0

Does this work?

Horizontal Centering

.ty-product-block {
  display: block;
  text-align: center;
}

Vertical Centering

.ty-product-block {
  display: block;
  text-align: center;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

Fiddle: https://jsfiddle.net/6txxshk9/3/

edited Dec 07 '15 at 00:16

answered Dec 07 '15 at 00:12

Praveen Kumar Purushothaman

164,888
24
203
252

I can't do that because div is used in a lot of other areas of the website. The only 2 that can be edited are :

– Grant9196 Dec 07 '15 at 00:15
@Grant9196 Updated. Check, you didn't say this before. – Praveen Kumar Purushothaman Dec 07 '15 at 00:16
I don't think it has been updated – Grant9196 Dec 07 '15 at 00:18
1

@PraveenKumar look, your speed is unbelievable ..! – Shafizadeh Dec 07 '15 at 00:19
@Grant9196 Refresh. I have changed `div` to classnames: `.ty-product-block` – Praveen Kumar Purushothaman Dec 07 '15 at 00:19
@Shafizadeh Ha ha ha... `:D` – Praveen Kumar Purushothaman Dec 07 '15 at 00:19
@PraveenKumar Can you send the link please. Thanks :P – Grant9196 Dec 07 '15 at 00:21
@Grant9196 What link? – Praveen Kumar Purushothaman Dec 07 '15 at 00:22
Where have you changed div to .ty-product-block? – Grant9196 Dec 07 '15 at 00:24
@Grant9196 refresh your page and see the above answer... – Praveen Kumar Purushothaman Dec 07 '15 at 00:25
@Grant9196 I haven't updated the fiddle – Praveen Kumar Purushothaman Dec 07 '15 at 00:26
Oh right, I see. If you try that in fiddle, I don;'t think it works – Grant9196 Dec 07 '15 at 00:27

How to make this div always align center?

1 Answers1