Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Center text inside an image inside a link

  • This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #239466
    Kognak
    Participant

    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 ? :)

    #239469
    Paulie_D
    Member

    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…

    #239470
    Kognak
    Participant

    Sorry !

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

    #239474
    Alex Zaworski
    Participant

    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/

    #239477
    Kognak
    Participant

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

    Thanks a lot !

    #239478
    Alex Zaworski
    Participant

    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.”

    #239479
    Kognak
    Participant

    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.

    #239480
    Alex Zaworski
    Participant

    Yep CodePen’s sweet :)

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

    #239481
    Kognak
    Participant

    Sorry on which line it is ?

    #239482
    Alex Zaworski
    Participant

    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?)

    #239483
    Kognak
    Participant

    Thanks a lot Alex ! It works. :)

    #239493
    Alex Zaworski
    Participant

    Great! No problem.

Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘CSS’ is closed to new topics and replies.