SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist kyllle's Avatar
    Join Date
    Jun 2008
    Posts
    469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how to center link in middle of box

    Hi all,

    Using this layout how can I position the Read More link in the center of the circle?

    HTML Code:
    <p class="more">
        <a href="#">READ MORE</a>
    </p>
    HTML Code:
    .more{               
            width: 100%;
            text-align: center;        
            margin: 0;
            padding: 0;
         }
    
         .more a{
             background: red;
             display: block;
             width: 120px;
             height: 120px;
             margin: 0 auto;      
             color: #fff;
             text-decoration: none;
            -moz-border-radius: 120px;
            -webkit-border-radius: 120px;
          }

  2. #2
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Give .more (or .more a) a line-height value matching the height of the circle.
    Code CSS:
    .more {               
       width: 100%;
       text-align: center;        
       margin: 0;
       padding: 0;
       line-height: 120px;
    }

  3. #3
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    .more{
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 0;
    }

    .more a{
    background: red;
    display: block;
    ...
    Just so you know, if .more is always going to have a display: block element inside it, you might as well remove the text-align: center on it.
    Similarly, since the anchor is now a block, it's considered a sort of block parent around the anonymous-inline-boxes around the text inside. So text-align: center would be necessary on the anchor now, because it's a block (for horizontal centering) if your text is way smaller than the 120px width.

    Victorinox' answer works for vertical centering unless the text gets long enough to wrap (there'll be too much vertical space then). Should that be the case, you could change the height to 80px and add in the rest of the height with top-padding (since padding adds to dimensions). I've done both techniques regularly since sometimes text length just isn't known.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •