I have a 4 element horizontal list using a sprite image as the li background that I've been trying to get centered in the footer div. At this point I think I'm just running in circles randomly changing styles trying to get it. Here's the relevent CSS and HTML:
#footer-share-links {
width:400px;
text-align:center;
margin:10px auto;
background:#FF6666;
border: 1px solid red;
height:36px;
}
#footer-share-links ul {
padding:0;
position:relative;
list-style-type:none;
}
#footer-share-links li {
margin:0 auto;
display:inline;
float:left;
text-align:center;
position:absolute;
}
#footer-share-links li, #footer-share-links a {
height:36px;
}
#ftr_facebook {left:0px;width:25px;}
#ftr_facebook {background:url('sprites/spriteGlobal.2014-0001.png') 0 0;}
#ftr_twitter {left:30px;width:26px;}
#ftr_twitter {background:url('sprites/spriteGlobal.2014-0001.png') -25px 0;}
#ftr_gplus {left:61px;width:26px;}
#ftr_gplus {background:url('sprites/spriteGlobal.2014-0001.png') -77px 0;}
#ftr_linkedin {left:93px;width:26px;}
#ftr_linkedin {background:url('sprites/spriteGlobal.2014-0001.png') -51px 0;}
The background and border on the div are just to help me see the box. The HTML is:
<div id="footer-share-links">
<ul>
<li id="ftr_facebook"></li>
<li id="ftr_twitter"></li>
<li id="ftr_gplus"></li>
<li id="ftr_linkedin"></li>
</ul>
</div>
Using this I get a centered red box from the div, but the list elements are pushed to the left edge. If I add margin:0 auto; to the UL it stays the same. If I add margin-left:100px it does move it towards center, but I don't want to use a fixed value unless I absolutely have to.
Stripped out some of the competing properties to the bare minimum.
JSfiddle Demo
CSS
#footer-share-links {
width:400px;
text-align:center; /* this centers the inline-block list items */
margin:10px auto;
background:#FF6666;
border: 1px solid red;
height:36px;
}
#footer-share-links ul {
padding:0;
position:relative;
list-style-type:none;
margin: 0;
}
#footer-share-links li {
display:inline-block;
width:26px;
height:36px;
background-image: url(http://lorempixel.com/output/abstract-q-c-25-25-6.jpg);
background-position: center;
}
Here is one way of doing it, try the following CSS:
#footer-share-links {
width:400px;
text-align:center;
margin:10px auto;
background:#FF6666;
border: 1px solid red;
height:36px;
line-height: 36px;
}
#footer-share-links ul {
padding:0;
margin: 0;
list-style-type:none;
}
#footer-share-links li {
margin: 0;
display: inline-block;
width: 50px; /* demo only */
background-color: yellow; /* demo only */
}
#footer-share-links a {
display: block; /* or inline-block */
}
Demo: http://jsfiddle.net/audetwebdesign/yN5MP/
As suggested earlier, remove any floats and absolute positioning.
For the parent container #footer-share-links, set the line-height equal to the height value, that way the vertical centering takes care of itself.
On the ul element, make sure to zero out the margins.
Finally, on the li elements, use display: inline-block so that the width is recognized.
You can use your id names to specify width's on the individual li elements as needed.
On the a elements (links), use display: block to get make the link take up the width of the li element so that the link has enough active/control area.
What you need to do:
#footer-share-links li {
/*margin:0 auto;*/
display:inline-block; // change this to inline-block
/*float:left;*/
text-align:center;
/*position:absolute;*/
}
#footer-share-links ul {
...
...
margin: 0; // add this
}
Take out those I commented out, it works
Related
http://jsfiddle.net/SyKnv/
I am trying to get rid of the additional space after each li item, to make the blocks the same size as their content. I tried to display them as inline, but that removes the bullets.
HTML
<div>
<ul>
<li>banana</li>
<li>orange</li>
<li>cherry</li>
</ul>
CSS
div {
width: 40%;
min-height: 50%;
border:1px solid black;
}
li {
border:1px solid black;
}
As mention in my comment you have to make ul display: inline-block; like this:
ul{
display: inline-block;
}
fiddle
try this code DEMO
div{
width: 40%;
min-height: 50%;
border:1px solid black;
}
ul {
margin:0;
padding:0;
}
li{
border:1px solid black;
list-style:inside;
}
CSS
ul{
display: inline-block;
}
Inline-Block
Basically, it’s a way to make elements inline, but preserving their block capabilities such as setting width and height, top and bottom margins and paddings etc.
More Info Regarding Inline-block
Updated Fiddle
I have a .container in that there are n number of (left-block and right-block) div's.
left-block is floated left and right-block is floated right.
But I am not getting margin after 1st left-block and right-block and 2nd left-block and right-block
here is a demo: JSBin
Add margin-top to .left-block as well as .right-block
Demo
.left-block {
float:left;
border:solid #CCC 1px;
width:350px;
height:125px;
background:transparent;
clear: right;
margin-top: 10px;
//position:relative;
}
.right-block {
float:right;
border:solid #CCC 1px;
width:350px;
height:125px;
background:transparent;
clear:right;
//position:relative;
margin-top: 10px;
}
P.S Remove the <br /> tags, they are not required.
The above will add 10px margin to top boxes as well, inorder to get rid of it, use the selectors below.
.container > div:nth-of-type(1) {
margin-top: 0;
}
.container > div:nth-of-type(2) {
margin-top: 0;
}
http://jsbin.com/ayiziNa/7/
You have to be careful with floated elements because they become inline elements - you might want to define them as inline-block first, so they are able to maintain margin without causing other problems
Here is the code I applied:
.container > div {
display: inline-block;
margin-top: 20px;
}
I have a button and I just can't center it on the page. Here is the CSS.
.banners {padding:12px 0 0 0}
.banners li {float:left;font-size:26px;line-height:2.4em;letter-spacing:-1px;margin-left:6px}
.banners li:first-child {margin-left:0}
.banners li a {width:242px;display:block;height:65px;background:url(http://www.mydomain.com/images/banner-bg.gif) no-repeat left top;text-align:center;color:#fff;text-decoration:none}
Here is the html
<ul class="banners wrapper">
<li>UNLIMITED<b> $49</b></li>
</ul>
This will center only the link
The html:
<div class="buttons">
UNLIMITED<b> $49</b>
</div>
The css:
.buttons {
text-align:center
}
This will center the link with a background image
The html:
<div class="buttons">
UNLIMITED<b> $49</b>
</div>
The css:
.buttons {
text-align:center
}
.buttons a {
display: block;
margin: 0 auto;
width: 242px;
height: 65px;
background-image:url("bg.jpg");
line-height:60px; /* <-- If you want the text centered, play with this value */
}
Notice that the ways browsers handle margin and padding with ul,li are different. First, we need to neutralize it by applying margin-left:0to li and padding:0px 0px 0px 0px;to create a consistent behavior across browsers. And apply display:block to your a tag.
Just some simple styles, you should get what you want
.banners
{
padding:0px 0px 0px 0px;
list-style-type:none;
}
.banners li{
margin-left:0px;
}
.banners li a{
display:block;
height:65px;
background:url(http://www.mydomain.com/images/banner-bg.gif)
margin-left:auto;
margin-right:auto;
}
margin-left:auto; and margin-right:auto; to center block elements. And you should control your space using padding of .banners li a.
I have this code:
<style>
.floatright
{
float: right;
margin-right:800px;
}
.menu {
padding: 0;
float: right;
width: auto;
position:relative;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
display:inline;
padding:0;
margin: 0px;
}
.menu a:link,
.menu a:hover {
text-decoration:none;
padding:0 5px 5px 0;
margin-right: 8px;
}
</style>
<div class="floatright">
<ul class="menu">
<li>api</li>
<li>tools</li>
<li>blog</li>
</ul>
</div>
it is meant to float to the right of the page (not in the right corner - just to the left) and have gaps between each link.
The gaps work ok but when the screen is resized ti does not stay where it is supposed to
any ideas?
Charlie, because you have a 800px margin on the right of the div it will always have that margin regardless of the screen resolution.
If you're wanting the margin to become less based on screen resolution maybe look at using percentages or media queries.
wou need to center the parent div ...and then the menu will float right.
.floatright {
width:1000px;
height:50px;
margin:0 auto;
}
Where the width should be the width of the "orange box".
The menu already floats well in its parent div.
here is a jsfiddle example: http://jsfiddle.net/hvLkh/
Additional advice: 1) do not put divs outside the body tags, 2) add a hight attribute to the div to push the box down, and 3) add the font formatting straight into your css and avoid font tags ... like this:
.floatright {
width:1000px;
height:50px;
margin:0 auto;
font-family:"Trebuchet MS",Arial,Verdana,Tahoma;
}
And here is an updated fiddle: http://jsfiddle.net/n6mnP/1/
I'm trying to center this bottom nav on a test site:
http://heroicdreams.com/kktest/
The ul li uses float:left; which is what I think is making it stay stuck to the left. I'm trying to figure out how to get it to be centered.
To get the links displayed horizontally I needed to float them left, but now I can't get the whole nav to be centered. Is there a way?
often using:
.divStyle {
text-align: center;
}
ul.styleName {
margin: 0 auto;
text-align: left;
}
will do the trick.
Applying an "auto" margin to the left and right of the ul like this will cause it to center itself in the div whenever the div has centered text. This is how many websites center the div that serves as the main content of their page.
Here is how I solved it, and is for dynamically generated menus also.
Assume this is the dynamically generated menu:
<div id="menu">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
and this is the CSS:
.menu {
width:300px;
text-align: center; /*Set a width and text-align on the main div*/
}
.menu ul{
margin:0;
padding:0;
display:inline-block;
list-style: none; /*Set display to inline-block to the ul*/
}
.menu ul li {
float: left;
margin-right: 1.3em; /*this is the usual*/
padding: 0;
}
Now, for the list to be centered you need to add an empty paragraph to clear the float. You can do it manually if the menu is static or using jQuery like this:
$(document).ready(function() {
$("<p class='clear'></p>").insertAfter('.menu-header ul li:last-child');
})
and the CSS of the .clear paragraph will be:
p.clear{
clear:both;
margin:0;
padding:0;
height: 0;
width: 0;
}
and that's it!
Add style="text-align: center;" to the parent div of the ul.
Add style=" display:inline-table;" to the ul.
Either CSS:
margin: 0px auto;
or
/*on the nav's parent*/
text-align: center;
/*on the nav*/
text-align: left;
In order for margin:0 auto to work, you need to set a width on your ul and remove the display:inline:
#footerLinks ul {
list-style:none;
margin:0 auto;
padding:0;
width:400px;
}
Hmm, I think the KISS rule applies here:
ul { text-align: center; }
ul li { display: inline-block; }