How do I align a list of images to be centered? I have them 25 pixels apart from each other. They are displaying inline. Now I want to center them on the page. Right now they are shifted left.
HTML
<div class="thumbnail-photos">
<ul>
<li><img src="images2.jpg height="100" width="100" /></li>
<li><img src="images2.jpg height="100" width="100" /></li>
<li><img src="images2.jpg height="100" width="100" /></li>
<li><img src="images2.jpg height="100" width="100" /></li>
</ul>
</div>
CSS:
.thumbnail-photos ul li {
display: inline;
margin: 25px;
}
I tried text-align: center; in .thumbnail-photos ul li and .thumbnail-photos ul li img
Try this to center on page - the trick is to specify a width to the wrapper container:
.thumbnail-photos {
width: 900px; /* any width you want */
margin: 0 auto;
}
Fiddle
Please update the following css.
.thumbnail-photos ul li {
display: inline-block;
margin: 25px;
width:120px;/*---any specific width to check----*/
}
.thumbnail-photos ul li img {
display:block;
margin:0 auto;
}
Related
using latest Bootstrap, I have an unordered list containing images like a grid:
<div id="featured-products" class="container">
<ul>
<li><img src=""></li>
<li><img src=""></li>
<li><img src=""></li>
<li><img src=""></li>
<li><img src=""></li>
<li><img src=""></li>
<li><img src=""></li>
<li><img src=""></li>
</ul>
</div>
I have centered the unordered list with text-align: center:
ul {
list-style-type: none;
text-align: center;
margin-bottom: 0px;
padding-left: 0;
padding-right: 0;
}
li {
display: inline;
padding-left: 0px;
padding-right: 10px;
}
The problem is that the last row is not adjusted to the left if the row is uncomplete, i.e. a list item is missing.
Is there a way to pull the last row to the left while keeping the ul centered within the div? The solutions has to be responsive.
center the list container, not it's contents.
Here's an example
ul {
max-width: 960px;
margin: auto;
}
also consider using Mansonry for image galleries
http://masonry.desandro.com/
ul {
list-style-type: none;
text-align: left; // this will make last row align left;
margin-bottom: 0px;
padding-left: 0;
padding-right: 0;
width:800px;
margin:0 auto; // this will center in page;
}
li {
display: inline-block;
padding-left: 0px;
padding-right: 10px;
background:red;
width:100px;
height:100px;
}
use making to center to page, than use align left to make last row behave like you want it.
http://jsfiddle.net/a9tmhuaf/1/
If I set the container (div) containing four items to 100% and make the elements (li) 25% with no margins or paddings on any of the elements, shouldn't each of the elements fit perfectly on one line in the container? Why does it not and why does the last one run onto the next line?
HTML (jsFiddle)
<div>
<ul>
<li><img src="http://static.comicvine.com/uploads/original/2/29462/582674-kenny.png" /></li>
<li><img src="http://static.comicvine.com/uploads/original/2/29462/582674-kenny.png" /></li>
<li><img src="http://static.comicvine.com/uploads/original/2/29462/582674-kenny.png" /></li>
<li><img src="http://static.comicvine.com/uploads/original/2/29462/582674-kenny.png" /></li>
</ul>
</div>
CSS
* {
margin: 0;
padding: 0;
}
div {
width: 100%;
}
li {
display: inline-block;
list-style: none;
width: 25%;
}
img {
width: 100px;
}
Link to fiddle: http://jsfiddle.net/arshadmuhammed/n4e1ncvh/1/
Add float:left to your li
li {
display: inline-block;
list-style: none;
width: 25%;
float:left;
}
ANSWER to your second question:
2) Instead of giving margin, give border & box-sizing to your li inorder to get even spacing between them.
li {
box-sizing:border-box;/*new*/
list-style: none;
width: 25%;
float:left;
background:red;
border:20px solid white;/*new*/
}
As you told, When you set he width is 100% and image width is 25% then why the last image goes to next line because you haven't define the position of you image.. Add float:left; in your code..
It is happening because of whitespaces between inline-blocks in your HTML. Remove them :
<div>
<ul>
<li><img src="http://static.comicvine.com/uploads/original/2/29462/582674-kenny.png" /></li><!--
--><li><img src="http://static.comicvine.com/uploads/original/2/29462/582674-kenny.png" /></li><!--
--><li><img src="http://static.comicvine.com/uploads/original/2/29462/582674-kenny.png" /></li><!--
--><li><img src="http://static.comicvine.com/uploads/original/2/29462/582674-kenny.png" /></li>
</ul>
</div>
Updated JSfiddle : http://jsfiddle.net/somj9pq2/4/
Okay seriously I feel so stupid for not being able to figure this out, I guess it's just Monday or something. Anyway I'm trying simply to make something like this as well as the logic I'm using.
. So I wrote what's happening into a js fiddle
for you all and hoping you can help.
I know that this is going to be one of those things that ends up making me feel so stupid but for some reason I cannot figure out what's wrong.
HTML5
<div id="logo-wrapper">
<ul>
<li><img src="Img" alt="Image"></li>
<li><img src="Img" alt="Image"></li>
<li><img src="Img" alt="Image"></li>
<li><img src="Img" alt="Image"></li>
</ul>
<ul>
<li><img src="Img" alt="Image"></li>
<li><img src="Img" alt="Image"></li>
<li><img src="Img" alt="Image"></li>
<li><img src="Img" alt="Image"></li>
</ul>
<ul>
<li><img src="Img" alt="Image"></li>
<li><img src="Img" alt="Image"></li>
<li><img src="Img" alt="Image"></li>
<li><img src="Img" alt="Image"></li>
</ul>
</div>
CSS3
#logo-wrapper {
width: 70%;
margin: 2% auto;
background-color: #2CAD96;
}
#logo-wrapper ul {
margin: 2%;
float: left;
background-color: #FFFFFF;
}
#logo-wrapper ul li {
list-style: none;
display: block;
margin: 2%;
}
#logo-wrapper ul li img{
width: 200px;
height: 100px;
}
ul lists have a default padding so you'll probably want to remove that with padding:0;.
Also you set the width of your #logo-wrapper to a certain value, even though the images inside might not fit. So you can either scale the images using width:100%;height:auto; or not set a width on the wrapper.
Also you'll want to add display:inline-block; to the ul and li elements and give them a width 40% or so.
And finally put a padding not a margin on the #logo-wrapper.
Edit: here's the JSFiddle http://jsfiddle.net/6AvNM/9/ if you tweak it some more you'll get your squares sorted out :)
First of all you need to clear floats. In my demo I used clearfix class. Also you might want to set a width to ul and li. I set them to 46% providing that you use margin 2%. Also make sure you reset default paddings on UL and LI.
#logo-wrapper ul li {
list-style: none;
display: block;
float: left;
margin: 2%;
width: 46%;
}
http://jsfiddle.net/6AvNM/11/
Ok, I fiddled around also a bit, the difference to the other posts is: mine is not resizing, you did not specify that. Also on #dfsq's solution, the images loose side-relation, however, nice one. (y)
I used mainly display: inline-block here to avoid clearing floats and giving the wrapper a height. Since this is static now, you either have to give all elements the right size to work (wrap automatically) or put a <br> where you want it to wrap.
*
{
box-sizing: border-box;
}
#logo-wrapper
{
width: 1000px;
margin: 2% auto;
background-color: black;
display:inline-block;
}
#logo-wrapper ul
{
margin: 2%;
display:inline-block;
background-color: red;
padding: 0;
width : 450px;
}
#logo-wrapper ul li
{
list-style: none;
display: inline-block;
margin: 2%;
}
#logo-wrapper ul li img
{
width: 200px;
height: 100px;
}
jsFiddle: http://jsfiddle.net/6AvNM/12/
I am attempting to make a simple navigation bar using 4 images, wrapped inside an unordered list.
I am having issues, because the bar is not lining up, it is acting as if the parent div it is nested within has a padding-left assigned to it and pushing the unordered list to the right. Here's a picture of what is happening:
I have a border on the main navigation div to see what is going on.
Here is my code:
<div id="container">
<div id="header">
<h1 class="hidden">Blue Ridge Fencing</h1>
</div>
<div id="navigation">
<ul>
<li><img src="images/website_build/nav_bar/home.jpg" width="208" height="50" alt="Home" border="0"></li>
<li><img src="images/website_build/nav_bar/about.jpg" width="227" height="50" alt="About" border="0"></li>
<li><img src="images/website_build/nav_bar/contact_us.jpg" width="290" height="50" alt="Contact Us" border="0"></li>
<li><img src="images/website_build/nav_bar/quote.jpg" width="235" height="50" alt="Quote" border="0"></li>
</ul>
</div>
<div id="content">
</div>
</div>
And the CSS:
#navigation {
height: 50px;
width: 1000px;
background-image: url(../images/backgrounds/otis_redding.png);
overflow: hidden;
padding: 0px;
border: 1px solid #000;
}
#container #navigation ul {
margin: 0px;
list-style-type: none;
font-size: 34px;
}
#container #navigation li {
float: left;
}
Thank you in advance!
<ul> elements generally have default padding set by the browser (or one of your stylesheets). Just remove it:
#navigation ul {
padding:0;
}
You might want to look into using a CSS reset if you haven't already:
https://stackoverflow.com/questions/167531/is-it-ok-to-use-a-css-reset-stylesheet
Why is there the need for browser resets?
You need to remove the padding from the ul element. You can do by adding padding: 0; to #container #navigation ul in your css.
I have a <ul> that is centered and contains pictures, each displayed side by side in one row. The problem comes when the client resizes the browser or has a lower resolution than the width of the <ul> with the pics in it.
What I am trying to achieve is that the center of the <ul> always remains in the center of the browser (even when browser’s width is smaller than <ul>s width), and both sides of the <ul> should get cut outside of the browser equally.
Is this possible without using JavaScript?
Yup, although you‘ll need an extra <div>, and this solution assumes the <ul> has a known, fixed height and width.
It’d be a bit easier to answer if we could see your code, but assuming you’ve got something like this:
<style type="text/css">
#pics {
width: 300px;
margin: 0 auto;
}
#pics li {
float: left;
}
</style>
...
<ul id="pics">
<li><img src="pic1.jpg" width="100" height="100" /></li>
<li><img src="pic2.jpg" width="100" height="100" /></li>
<li><img src="pic3.jpg" width="100" height="100" /></li>
</ul>
Then you can get the centering behaviour you’re looking for like this::
<style type="text/css">
#centerer {
height: 100px;
position: relative;
}
#pics {
position: absolute;
left: 50%;
margin-left: -150px;
width: 300px;
margin: 0 auto;
}
#pics li {
float: left;
}
</style>
...
<div id="centerer">
<ul id="pics">
<li><img src="pic1.jpg" width="100" height="100" /></li>
<li><img src="pic2.jpg" width="100" height="100" /></li>
<li><img src="pic3.jpg" width="100" height="100" /></li>
</ul>
</div>