I need some help centering some images
HTML:
<div id="thumbs" class="navigation">
<ul class="thumbs noscript">
<li>
<a class="thumb" href="#">
<img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" />
</a>
</li>
<li>
<a class="thumb" href="#">
<img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" />
</a>
</li>
<li>
<a class="thumb" href="#">
<img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" />
</a>
</li>
<br>
<li>
<a class="thumb" href="#">
<img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" />
</a>
</li>
<li>
<a class="thumb" href="#">
<img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" />
</a>
</li>
CSS:
ul.thumbs {
clear: both;
padding-left: 0px;
}
ul.thumbs li {
display: inline-block;
/*float: left;*/
padding: 0;
margin: 5px 10px 5px 0;
list-style: none;
}
a.thumb {
padding: 2px;
display: block;
border: 1px solid #ccc;
}
ul.thumbs li.selected a.thumb {
background: #DAA12F;
}
a.thumb:focus {
outline: none;
}
ul.thumbs img {
border: none;
display: block;
height: 120px;
width: 120px;
margin: 0px auto;
}
I need the images be centered together so that they remained lined up. Ive tried using:
ul.thumbs {
text-align:center;
}
but since there are a different number of images on each row, they move out of alignment
Thanks for the help, this is driving me crazy
EDIT: I thought I found a solution using this as a guide: http://www.tightcss.com/centering/center_variable_width.htm but if the images go over more than row, they no longer center. Originally I put a br tag to break up the rows and that fixes the problem, but a JS library Im using doesnt play nice with br tags between list items. Any suggestions (you can see the issue here http://jsfiddle.net/HvZva/26/)
There is two solutions to this, one is if you want your images to be centered and the another is if your images should be aligned left, but centered on the page.
Center block, left align images
To do this you need to add the following to your css (or see: http://jsfiddle.net/HvZva/20/)
ul.thumbs{
margin:0 auto;
width:416px;
}
what I do is basicly to tell the browser that this un ordered list should have an equal margin to both sides. But since this object has an width of 100% as standard, we need to specifiy that aswell, and in this case it is 416px.
Center align images
If this is static content, one easy way to do this is to add a div with the class of center that wraps each line, and then adding "text-align:center;" to those divs, that will do the trick.
note: there is one new way to center the block, but aligning the images to the left. but that involves the box flex model and css 3, and it has not yet been implemented by browsers yet
Applying text-align: center; to .thumbs.noscript ul fixes it in the jsfiddle
You can give the parent element a width and apply margin-left: auto; margin-right: auto;
http://jsfiddle.net/HvZva/13/
ul.thumbs {
display:inline-block;
text-align:center;
}
Something like this? http://jsfiddle.net/HvZva/11/
I may have mis interpreded your issue but is it something like this you want?
http://jsfiddle.net/HvZva/12/
Related
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 6 years ago.
I'm working on a photo page for a site I'm creating, however it seems that the link is extending into the whitespace beneath the image. The problem disappears when I remove the surrounding <section> but I'm not sure why.
Here's a Jsfiddle better showcasing my code and the problem
.photo {
text-align: center;
float: left;
width: 70%;
margin-left: 8%;
margin-top: 5%;
margin-bottom: 5%;
}
.photo a {
border: 1px solid red;
}
.photo img {
margin: 1%;
}
<section class="photo">
<a href="#">
<img src="http://upshout.com/wp-content/uploads/2015/06/dwarf-kitten-01.jpg" />
</a>
<a href="#">
<img src="http://upshout.com/wp-content/uploads/2015/06/dwarf-kitten-01.jpg" />
</a>
<a href="#">
<img src="http://upshout.com/wp-content/uploads/2015/06/dwarf-kitten-01.jpg" />
</a>
</section>
I added a border to the problem area. Any help is much appreciated!
because a and img are inline elements, so
make a a block level element by display:block, to the border appear around the image
set display:block to img to remove underneath whitespace caused by being an inline element. (other solution would be setting vertical-align-bottom, given img by default is vertical-align:baseline)
Note: I gave the img a max-width:100% to be responsive, and if you give the border to img instead of a, the a being display:block isn't necessary anymore, although is good to have it.
See more about inline elements here on w3
.photo {
text-align: center;
float: left;
width: 70%;
margin-left: 8%;
margin-top: 5%;
margin-bottom: 5%;
}
.photo a {
display: block;
}
.photo img {
display: block;
border: 1px solid red;
max-width: 100%;
margin: 1%
}
<section class="photo">
<a href="#">
<img src="http://upshout.com/wp-content/uploads/2015/06/dwarf-kitten-01.jpg" />
</a>
<a href="#">
<img src="http://upshout.com/wp-content/uploads/2015/06/dwarf-kitten-01.jpg" />
</a>
<a href="#">
<img src="http://upshout.com/wp-content/uploads/2015/06/dwarf-kitten-01.jpg" />
</a>
</section>
I have some images inside of an <li> that I am wanting to make a link. Only the bottom half of the image is clickable. I have tried different structures and looked into jquery solutions, but want to keep it pure css.
<div class="link">
<ul>
<li>
<a href="url">
<img src="image">
</a>
</li>
</ul>
</div>
.link {
white-space: nowrap;
text-align:center;
}
.link li {
max-width: 23.3%;
display: inline-block;
text-align: center;
vertical-align: middle;
}
.link img {
max-width:100%;
}
Add display:inline-block to the a link and make it wrap around the images, with height:100% and width:100%.
I found a deeper problem. My header was overlapping that area.
I have a Menu with an image for the list items, and I want to join those images with an horizontal line.
<ul>
<li>
<img src="foo/bar.png">
</li>
<li>
<img src="foo/bar2.png">
</li>
</ul>
To explain it better I show 2 images:
I want to convert
into
I don't know the css needed to position a 'line.png' like that or to make it in pure css.
Kronen,
Hope this link will helps...
[http://jsfiddle.net/Karthik_Dev/mwjzcnqe/][1]
Make sure the line image will be in size of 1 X 4 in px.
Comments are welcome
There are many ways to achieve this, but using your approach, just try this:
ul{background:url(images/line.png) repeat-x 50%; display:block;}
li{display:inline-block}
where line.png is a line just as in your image
<div>
<img src="foo/bar.png">
<img src="foo/bar.png">
</div>
div {
height: 20px;
border-bottom: 4px #ddd;
}
div a {
display: block;
float: left; // or display: inline-block and centered on parent div
margin: 0 10px;
width: 44px;
height: 44px;
}
I have a group of 4 images that I'm trying to align vertically and horizontally.
The problem:
I cant get ride of a a small vertical spacing between them.
Please check out the issue reproduced in Fiddle
html:
<div>
<ul>
<li> <img src="http://placekitten.com/100/100" alt="">
</li>
<li> <img src="http://placekitten.com/100/100" alt="">
</li>
<li> <img src="http://placekitten.com/100/100" alt="">
</li>
<li> <img src="http://placekitten.com/100/100" alt="">
</li>
</ul>
</div>
css:
* {margin:0; padding: 0;}
div {width: 200px; height: 200px;}
ul {
list-style:none;
}
ul li {
display: inline-block;
float:left;
}
It seems pretty simple, but I haven't been able to get ride of spacing other than manually specify the height to 100px, which isn't responsive and so not viable.
Adding vertical-align:top on the img elements will remove the gap. The default is baseline.
As a side note, bottom and middle work too.
jsFiddle example
img {
vertical-align:top;
}
Adding display:block to the img elements works too. (example)
img {
display:block;
}
Try
margin: 0 auto;
border: 0px;
If you don't have text in this you can just say
ul {
font-size: 0;
}
This eliminates the space, see modified JSFiddle
not sure why, but I can't get the icons centered on the page without using padding-left:130px;
Which isn't ideal of course because the icons don't center properly when you re-size the browser window. Maybe I need more coffee, but I could use some stacker help this morning!
http://towerdive.net/
HTML
<div id="center2">
<div id="social_icons">
<p>
Thanks for your interest in our blog!
You can also find us here, as well as subscribe to our newsletter:
</p>
<ul>
<li id="facebook">
<img src="img/icon_facebook.png" alt="Facebook"/>
</li>
<li id="twitter">
<img src="img/icon_twitter.png" alt="Twitter"/>
</li>
<li id="newsletter">
<img src="img/icon_newsletter.png" alt="Newsletter"/>
</li>
</ul>
</div>
</div>
CSS
#center2 {
width: 100%;
}
#social_icons {
margin: 0 auto;
width: 400px;
height: 250px;
text-align: center;
}
#social_icons p {
color: #e3cda4;
}
#social_icons ul {
margin: 0 auto;
list-style: none;
text-align: center;
}
#social_icons ul li {
float: left;
padding-right: 10px;
}
Let me know if you guys need the full HTML or CSS!
You can use display:inline-block for this. Write Like this:
#social_icons ul li {
display: inline-block;
*display:inline;/* For IE7*/
*zoom:1;/* For IE7*/
vertical-align:top;
padding-right: 10px;
}
You currently use floats to display your navigational list horizontally. You can't align the list-items in the middle of the unordered lists because of the floats.
Another technique is instead of float: left; using display: inline-block;. The list-items will be displayed horizontally but also all extra white-space will taken into account. You'll get extra margins between the items (like 4px). Now you can use text-align: center; on the UL to center the list-items.
There are several (easy) workouts described in this article by Chris Coyier:
http://css-tricks.com/fighting-the-space-between-inline-block-elements/