I'm trying to center my list with images inside a div. This is what I'm getting (icons way too small and not centered).
this is the css ive got and the html
<div id="social">
<ul>
<li><img src="img/footertwitter.png" alt="placeholder+image"></li>
<li><img src="img/footerfacebook.png" alt="placeholder+image"></li>
<li><img src="img/footeremail.png" alt="placeholder+image"></li>
</ul>
</div>
#social {
margin: 0 auto;
text-align: center;
width: 90%;
max-width: 1140px;
position: relative;
}
#social ul {
/*margin: 0 0 3em 0!important;*/
padding: 0!important;
}
#social ul li {
list-style-type: none;
display: inline-block;
margin-left: 1.5em;
margin-right: 1.5em;
}
In your rule for the ul consider setting the display property to block and the margins to auto. If I understand correctly what you're trying to accomplish, that should center things for you while retaining the margins you assigned.
The updated CSS would look like:
#social
{
margin: 0 auto;
text-align: center;
width: 90%;
max-width: 1140px;
position: relative;
}
#social ul
{
padding: 0;
margin:auto;
display: block;
}
#social ul li
{
list-style-type: none;
display: inline-block;
margin-left: 1.5em;
margin-right: 1.5em;
}
This fiddle shows the changes in action. Hope that helps.
You can simply increase the icon size according to your need:
social ul li img {
width:50px;
height:50px;
}
Give a fixed width to ul and then put it in the center using the following code:
social ul {
width:300px; /*Example*/
display:block;
margin:0 auto;
}
Related
i am trying to make a responsive navigation bar with these 4 elements. however, if i drag the browserwindow to a certrain point it starts placing one of the 4 below the rest. but i dont know what i'm doing wrong.
The HTML:
<div id="nav">
<ul>
<li class="blue">Home</li>
<li class="blue">Trailer</li>
<li class="red">Gallery</li>
<li clas="red">Contact Us</li>
</ul>
</div>
The CSS:
#nav {
width: 100%;
background-color:transparant;
}
#nav ul {
width: 85%;
max-width: 1200px;
padding: 0;
margin: 0 auto;
list-style: none;
text-align: center;
}
#nav ul li {
display: inline-table;
width: 24%;
padding: 4px;
background-color:#242424;
border-radius: 5px;
}
#nav ul li a {
color:white;
text-decoration: none;
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
display: inline-block;
border-radius: 5px;
}
You are maybe having problems with your padding.
For that, add the box-sizing property in your lis and the padding will be included in the width of the element, like:
#nav ul li {
display: inline-table;
width: 24%;
padding: 4px;
background-color:#242424;
border-radius: 5px;
box-sizing: border-box;
}
Fiddle: http://jsfiddle.net/begyu5v3/
Info: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
And there's those undesirable white spaces between your lis. In this link, there are some ways to avoid this problem, like font-size:
#nav ul {
font-size: 0;
}
#nav ul li {
font-size: 16px;
}
Give it a try and let me know if it helps!
Having problems centering a ul horizontally within a div. The list doesn't contain any text, just images.
I'm using the list to display social media icons in the footer of my website.
Thought it would be easy enough to do but I've I've exhausted all methods I can think of, can anyone help? I'm probably missing the obvious :/
HTML
<div class="container">
<div id="footer">
<div id="social_media">
<ul>
<li class="youtube">
</li>
<li class="flickr">
</li>
<li class="googleplus">
</li>
<li class="linkedin">
</li>
</ul>
</div>
</div>
CSS
.container {
margin: auto;
max-width: 700px;
width: 700px;
}
#footer {
border:1px solid #000;
height:100px;
}
#social_media {
width: 100%;
display: block;
float:left;
}
#social_media ul {
display: block;
float:left;
padding: 0;
margin: 10px auto;
}
#social_media li {
list-style: none;
background: #000;
margin: 0 10px;
}
#social_media li a, #social_media li {
width: 44px;
height: 44px;
display: block;
float: left;
}
#social_media ul li.youtube {
background-position: -88px 0;
}
#social_media ul li.flickr {
background-position: -132px 0;
}
#social_media ul li.googleplus {
background-position: 0 0;
}
#social_media ul li.linkedin {
background-position: -44px 0;
}
http://jsfiddle.net/SZ27u
You could set text-align:center on the parent, .container, and then remove width:100% and float:left on #social_media, and change display: block to display:inline-block.
jsFiddle example
.container {
margin: auto;
max-width: 700px;
width: 700px;
text-align: center;
}
#social_media {
display:inline-block;
}
You can do this with a technique called shrink wrapping. This will also work with multiple floated children. The relevant styles are:
#footer > div {
float: right;
position: relative;
left: -50%;
}
#social_media {
position: relative;
left: 50%;
}
http://jsfiddle.net/SZ27u/2/
FIDDLE
So you have to define a width for the margin: auto; to work. This is a good way to do what you want.
#social_media ul {
display: block;
padding: 0;
margin: auto;
width: 256px;
}
Another option assumes you know what the width iof the UL should be based on the width of your LI's. It also assumes that setting a specific width for the element is ok based on your template.
Simply change these bits of CSS to the following:
(deleted the float and added width and overflow)
#social_media ul {
display: block;
overflow: hidden;
width: 256px;
padding: 0;
margin: 10px auto;
}
http://jsfiddle.net/SZ27u/3/
I'm currently trying to center a <ul> horizontally within a <div> and it's not for budging, I've tried margin: 0 auto; and text-align: center; and neither seem to work.
Demo
HTML
<!-- START RECENT WORK -->
<div id="recentwork">
<div class="display">
<h2>Recent Work</h2>
<ul>
<li class="recent"><img src="http://www.gezzamondo.co.uk/images/apps/ticketsoup/ticketsoup-01.jpg" /></li>
<li class="recent"><img src="http://www.gezzamondo.co.uk/images/apps/ticketsoup/ticketsoup-01.jpg" /></li>
<li class="recent last"><img src="http://www.gezzamondo.co.uk/images/apps/ticketsoup/ticketsoup-01.jpg" /></li>
</ul>
</div>
</div>
<!-- CLOSE RECENT WORK -->
CSS
#recentwork {
width: 100%;
background-color: #ececec;
clear: both;
padding: 80px 0;
}
#recentwork .display {
width: 960px;
margin: 0 auto;
overflow: hidden;
}
#recentwork .display ul {
margin: 0 auto;
padding: 0;
list-style: none;
}
#recentwork .display ul li.recent {
float: left;
margin-right: 30px;
width: 200px;
}
#recentwork .display ul li.recent.last {
margin-right: 0!important;
}
Lets use the old school technique of centering the list by giving a display: inline-block. Do it this way:
#recentwork .display {
overflow: hidden;
text-align: center;
}
#recentwork .display ul {
display: inline-block;
padding: 0;
list-style: none;
}
#recentwork .display ul li.recent {
display: inline-block;
margin-right: 30px;
width: 200px;
}
Fiddle: http://jsfiddle.net/praveenscience/pU2Gx/3/
margin: 0 auto will only work if you have a fixed width.
I'm assuming you want the individual list items to still be left-aligned within the list itself. In that case, try this:
<div class="centerlist">
<ul>
<li>List item</li>
<li>List item</li>
<li>A longer list item than the other two</li>
</ul>
</div>
And this CSS:
.centerlist {
text-align: center;
}
.centerlist > ul {
display: inline-block;
text-align: left;
}
Try this:
#recentwork {
width:100%;
background-color:#ececec;
clear:both;
padding:80px 0;
}
.display {
width:960px;
margin:0 auto;
overflow:hidden;
}
.display ul {
display: block;
margin:0 auto;
padding:0;
list-style:none;
text-align: center;
width: 820px;
}
.recent{
display: inline-block;
padding: 0;
margin: 0;
width: 270px;
}
Note the use of display: inline-block and the use of proper widths.
http://jsfiddle.net/Z6LJE/
Your ul needs to have a width for it to be centered.
For example:
#recentwork .display ul {
margin:0 auto;
padding:0;
list-style:none;
width:700px;
}
jsFiddle example
Modify the following CSS:
#recentwork .display ul {
display: block;
list-style: none;
margin: 0 auto;
padding: 0;
text-align: center;
}
#recentwork .display ul li.recent {
display: inline-block;
margin-right: 30px;
width: 200px;
}
I feel as if I have tried everything from text-align center to margin:0 auto with a position relative and width of 100%, but they didn't work, I am trying to center my UL inside the div...
Here is my code
<style type="text/css">
.header {
height: 40px;
background: #000;
width: 100%;
}
.header ul {
list-style-type: none;
}
.header li {
float: left;
line-height: 40px;
}
.header li a {
color: #FFF;
padding: 0 18px;
height: 40px;
}
</style>
<div class="header">
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Services</li>
<li>Rates</li>
<li>Reviews</li>
<li>FAQ</li>
<li>Contact</li>
</ul>
</div>
This works without having to define a set width.
ul {
display: table;
margin: 0 auto;
}
If you want to get rid of the left-side padding, thus genuinely centering the list, add:
padding-left: 0;
This should fix it for you.
ul {
display: inline-block;
margin: 0 auto;
}
If that doesn't work for you then give the UL a set width i.e.
ul {
width: 300px;
margin: 0 auto;
}
I've got a list here for my page's footer, that I want displayed horizontally.
But because I've turned it into an inline list to go horizontally, the background images get cut off vertically. The biggest one is 27px high.
So I'm stuck.. I know why the following is doing what it's doing. But how do I get around it?
Here's the html:
<div id="footer">
<ul>
<li id="footer-tmdb">Film data courtesy of TMDB</li>
<li id="footer-email">Contact Us</li>
<li id="footer-twitter">Follow Us</li>
</ul>
</div>
and the CSS:
#footer ul {
height: 27px;
}
#footer ul li {
display: inline;
list-style: none;
margin-right: 20px;
}
#footer-tmdb {
background: url('../images/logo-tmdb.png') no-repeat 0 0;
padding-left: 140px;
}
#footer-email {
background: url('../images/icon-email.png') no-repeat 0 3px;
padding-left: 40px;
}
#footer-twitter {
background: url('../images/icon-twitter.png') no-repeat 0 0;
padding-left: 49px;
}
Here's what it looks like:
As you can see, half of the images are cut off.
The simpler the solution, the better, please.
#footer ul li {
display: block;
float: left;
height: 27px;
list-style: none;
margin-right: 20px;
}
Use inline-block
#footer li {
height: 27px;
display: inline-block;
}
Try this:
#footer ul {
overflow: auto
}
#footer ul li {
display: block;
list-style: none;
margin-right: 20px;
float: left;
}
Try this:
#footer li,
#footer ul {
height: 27px;
}