/    Sign up×
Community /Pin to ProfileBookmark

Centering a Floating Div

Copy linkTweet thisAlerts:
Dec 15.2008

I have a section with Previous, Next and Title Links for my pages. I want this section to be styled so that the ‘Next’ Link will float to the right, The ‘Previous’ to the left and the title / ‘home’ to be in the middle.

It is centering the title (class=home) that is causing the problems, as I cannot float it in the middle.I tried moving it from the left by 30% but this does not work consistently to center it when I have larger page titles

HTML

<div id=”prev_next”>
<ul class=”navigation”>

<li class=”next”><a href=””>NEXT</a></li>
<li class=”previous”><a href=””>PREVIOUS</a></li>
<li class=”home”><h1>Home</h1></li>
</ul>
</div>

CSS

#prev_next
{
margin-left:-28px;
margin-right:-35px;
height:37px;
width:537px;
}

ul.navigation li
{
display: inline;
background-image:none;
}

ul.navigation a:link, ul.navigation a:visited, ul.navigation a:active

{
background-image:none;
}

ul.navigation li.home
{
float:left;
font-weight:bold;
color:#666666;
position:relative;
left:30%;
}

ul.navigation li.next
{
float: right;
margin-top:12px;
padding-right:42px;
}

ul.navigation li.previous
{
float: left;
margin-top:12px;
}

Any way I can center this value using css?

to post a comment
CSS

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@willypDec 15.2008 — I would approach this like a 3-col layout almost by giving each li a width in percent. I do believe this should give you the effect you are looking for. I hope this helps. Let me know. The way I did this you should be able to change the home to text to just about any word and it will still stay centered.

Here is your CSS with my changes and comments. I did not touch your html.

peace...
[CODE]
 #prev_next
{
margin-left:-28px;
margin-right:-35px;
height:37px;
width:537px;
}

ul.navigation li
{
float:left;
/*float all the lis to the left instead of using display:inline*/
background-image:none;
}

ul.navigation a:link, ul.navigation a:visited, ul.navigation a:active

{
background-image:none;
}

ul.navigation li.home
{
float:left;
font-weight:bold;
color:#666666;
/*remove the position relative and give this a width*/
width: 60%;
text-align: center; /*this will make it so when the text gets bigger it stays centered*/
}

ul.navigation li.next
{
float: right;
margin-top:12px;
width: 20%; /*give this some width*/
text-align: right;/*make it hug the right side*/
}

ul.navigation li.previous
{
float: left;
margin-top:12px;
width: 20%; /*give this some width*/
}
[/CODE]
×

Success!

Help @millsy007 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.12,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...