Center text inside an image inside a link

[Kognak]

Hi,

Here’s the HTML part :

<ul class="products">
<li class="product">
<a href="#"><img src="#" width="150" height="150">
<h3>Title</h3>
</a>
</li>
<li>...</li>
</ul>

And my css :

`ul.products {
display: table;
}

li.product {
list-style: none;
display: table-cell;
position: relative;
width: 150px;
height: 150px;
vertical-align: top;
}

li.product a {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
-ms-border-radius: 150px;
-o-border-radius: 150px;
}

li.product a:hover {
text-decoration: none;
}

ul.products mark.count {
display: none;
}

li.product img {
position: absolute;
width: 150px;
height: 150px;-webkit-border-radius: 150px;
-moz-border-radius: 150px;
-ms-border-radius: 150px;
-o-border-radius: 150px;
z-index: 1;
}

li.product h3 {
text-align: center;
position: relative;
vertical-align: middle;
display: table-cell;
width: 95%;
height: 95%;
text-shadow: 0 0 5px #404040;
color: white;
z-index: 10;
word-break: break-all;
}
`

I used approximately that code for another place organized with inside a div, without table and it worked very well. I tried to use it for this table but it doesn’t work properly. My current problem is : the titles aren’t inside the image (horizontal and vertical align), but outside on the right…

Can you please help me to solve this problem ? :)

[Paulie_D]

Please don’t just post a codedump.

Make a demo in Codepen.io and share it here.

I can think of at least 3 methods to do this…

[Kognak]

Sorry !

Here’s the codepen.io : http://codepen.io/Kognak/pen/zqNXYb

[Alex Zaworski]

This does what you want:

li.product h3 {
  text-align: center;
  position: relative;
  display:block;
  margin:0;
  top:50%;
  transform:translateY(-50%);
  text-shadow: 0 0 5px #404040;
  color: white;
  z-index: 10;
  word-break: break-all;
}

Looks like you went kind of crazy on the display:table-cell deal— I’d recommend revisiting those, doesn’t seem like the correct solution here.

This is the ‘magic’ bit:

  display:block;
  margin:0;
  top:50%;
  transform:translateY(-50%);

And here’s some further reading for you: https://css-tricks.com/centering-css-complete-guide/

[Kognak]

Hi,
thanks. It works on Codepen.io, but not on my styleshit. Probably a conflict. I’ll check.

Thanks a lot !

[Alex Zaworski]

You can link external assets on CodePen which will allow you to test stuff with your actual stylesheet :) Click the gear in the CSS editor (top left), then paste the URL to your stylesheet under “Add External CSS.”

[Kognak]

Awesome ! What a tool ! :)

I’m able to replicate the problem, but not to solve it.

Yes I displayed “table-cell” everywhere because I was searching to make it work. I’ve to clean it that’s right.

[Alex Zaworski]

Yep CodePen’s sweet :)

Assuming your Pen’s current pasted CSS is up-to-date, strip the line-height on your <li>

[Kognak]

Sorry on which line it is ?

[Alex Zaworski]

li.product needs line-height:0 added to it (on my screen everything is nudged down passed centered, I’m assuming that’s the issue you’re having too?)

[Kognak]

Thanks a lot Alex ! It works. :)

[Alex Zaworski]

Great! No problem.

[Author]

Posts