SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Possible with CSS3? Text align left if content wraps, otherwise, text align center

    I'm labeling photos with captions and I'd like to center the text if the text does not span more than one line. However, on captions that span more than one line, I'd like to left justify (text-align:left).

    Is this remotely possible with css3 or script?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,775
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    HI Scott,

    I think we can do that with css2 depending in the exact dynamics of course.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .box {
    	width:150px;
    	border:1px solid #000;
    	padding:10px;
    	text-align:center;
    	margin:10px;
    }
    .pic {
    	width:150px;
    	height:100px;
    	background:red;
    	margin:0 0 10px;
    }
    .caption {
    	display:inline-block;
     *display:inline;/* ie6/7 inline-block hack */
    	zoom:1.0;
    	text-align:left;
    	margin:5px 0;
    }
    </style>
    </head>
    
    <body>
    <div class="box">
    		<div class="pic"></div>
    		<p class="caption">This is the caption</p>
    </div>
    <div class="box">
    		<div class="pic"></div>
    		<p class="caption">caption</p>
    </div>
    <div class="box">
    		<div class="pic"></div>
    		<p class="caption">This is the caption that runs to 2 lines</p>
    </div>
    </body>
    </html>

  3. #3
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I believe something about my existing css is throwing off your css logic. I can get your example to work standalone, but still working on getting it to work on my live example > http://http://canvas.clickbump.com/

    Code:
    .slides li {
    text-align:center!important;
    }
    
    p.flex-caption {
    display:inline-block!important;
    *display:inline;/* ie6/7 inline-block hack */
    zoom:1.0;
    text-align:left;
    }

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,775
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi Scott,

    Your flex-caption is absolutely placed which means the inline-block will have no effect.

    You will need to nest an inner element like so:

    Code:
    <p class="flex-caption"><span>ClickBump 6.5 &gt; Now with <b>FlexSlider</b> Integration!</span></p>
    Code:
    .flex-caption span{
    display:inline-block;
    text-align:left;
    }

  5. #5
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, I see. I had to make the flex-caption element AP due to the fact I want it to always overlay the slide at the bottom of the li container element.

    I don't know of any other way to anchor the element to the bottom of the container without AP.

    Otherwise, I may use script to wrap the p elements in span during runtime.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,775
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by Scott Blanchard View Post
    Ah, I see. I had to make the flex-caption element AP due to the fact I want it to always overlay the slide at the bottom of the li container element.

    I don't know of any other way to anchor the element to the bottom of the container without AP.
    You could probably make it start after the image and then drag it upwards with a negative margin but may get a little messy and assumes that the image stays on the flow. The span is the sensible option


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
  •