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?

HI Scott,

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


<!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>

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/

.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;
}

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:


<p class="flex-caption"><span>ClickBump 6.5 > Now with <b>FlexSlider</b> Integration!</span></p>


.flex-caption span{
display:inline-block;
text-align:left;
}


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.

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 :slight_smile: