SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to center align an absolute positioned title

    URL: http://goo.gl/7yk4zm

    Toward the bottom of this home page, there are "pinterest-style" blog posts with the name of the category in a blue bar on the bottom of these posts (just on a couple of them right now). The bars are positioned correctly vertically but I need them to be in the center of the container. How can I do that?

    Thanks!

  2. #2
    SitePoint Member
    Join Date
    Mar 2014
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Define a width for title and then margin: 0 auto;

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your reply! I don't think that will work because the titles will be different lengths. I'd like to keep them fluid, if possible.

  4. #4
    SitePoint Member
    Join Date
    Mar 2014
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can try this:

    change left: 50%; to left: 0;
    margin-left: -25%; to margin: 0 auto;

    I hope this will work.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again for your help. Unfortunately, that doesn't work.

  6. #6
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Update:

    I was able to center them using the techniques described here: http://stackoverflow.com/questions/1...de-a-100-width

    So, I put left: 0, right: 0, and margin: 0 auto.

    HOWEVER, now the bar stretches across the whole div when I only want them to be "button-like" and the width of the text inside.

  7. #7
    SitePoint Member
    Join Date
    Mar 2014
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can add some space on left and right (left: 5%, right: 5%).

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    A modern way to do it (IE9+) is like this:

    Code:
    .home-bottom-1 .widget-title, .home-bottom-2 .widget-title, .home-bottom-3 .widget-title {
    background-color: #77C3C5;
    bottom: -15px;
    color: #fff;
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 12px;
    font-style: italic;
    letter-spacing: 0.08em;
    padding: 8px;
    position: absolute;
    text-align: center;
    text-transform: lowercase;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    white-space:nowrap; /* prevents the long category name from breaking to a second line */
    }

  9. #9
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much, Ralph! That works!

    I appreciate both of you very much.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    If you want to support back to IE7 you can do this instead.

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style>
    body { background:#ccc }
    .box {
    	margin:20px 20px 40px;
    	border:1px solid #ddd;
    	background:#fff;
    	position:relative;
    	width:20%;
    	min-height:300px;
    }
    .box h4 {
    	position:absolute;
    	bottom:-15px;
    	left:0;
    	right:0;
    	text-align:center;
    	margin:0;
    }
    .box h4 span {
    	display:inline-block;
    	background:blue;
    	color:#fff;
    	padding:5px 10px;
    }
    </style>
    </head>
    
    <body>
    <div class="box">
    		<h4><span>Heading</span></h4>
    </div>
    <div class="box">
    		<h4><span>Heading longer</span></h4>
    </div>
    <div class="box">
    		<h4><span>Head</span></h4>
    </div>
    </body>
    </html>
    Requires the extra span though.

  11. #11
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much, Paul!


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
  •