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!
Define a width for title and then margin: 0 auto;
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.
You can try this:
change left: 50%; to left: 0;
margin-left: -25%; to margin: 0 auto;
I hope this will work.
Thanks again for your help. Unfortunately, that doesn’t work.
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.
You can add some space on left and right (left: 5%, right: 5%).
ralphm
March 31, 2014, 1:14pm
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]
}
Thanks so much, Ralph! That works!
I appreciate both of you very much.
PaulOB
April 1, 2014, 12:09pm
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.