How to center align an absolute positioned title

HTML & CSS
1

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

Define a width for title and then margin: 0 auto;

3

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

You can try this:

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

I hope this will work.

5

Thanks again for your help. Unfortunately, that doesn’t work.

6

Update:

I was able to center them using the techniques described here: http://stackoverflow.com/questions/16758102/how-do-i-horizontally-center-an-absolute-positioned-element-inside-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

You can add some space on left and right (left: 5%, right: 5%).

8

A modern way to do it (IE9+) is like this:

.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;
[COLOR="#FF0000"]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 */[/COLOR]
}
9

Thanks so much, Ralph! That works! :slight_smile:

I appreciate both of you very much.

10

If you want to support back to IE7 you can do this instead.


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

Thanks so much, Paul!