I have a list of images (not in a list, but could be if that might solve the problem) that I want to fill the whole width of a div. I've tried the code at the bottom, and while it does justify any text in the p tag it doesn't do the same for images. How can I get it to evenly space the images across the full width of the div?
<div>
<p>
<img src="image1.png" alt="foo" />
<img src="image2.png" alt="foo" />
<img src="image3.png" alt="foo" />
<img src="image4.png" alt="foo" />
<img src="image5.png" alt="foo" />
</p>
</div>
My CSS:
div { width: 30em; }
p { text-align: justify; }
The simplest way to make it is :
.justify-image{ text-align: justify;}
.justify-image img{display:inline-block;}
.justify-image:after{content:""; display: inline-block; width: 100%; height: 0;}
<p class="justify-image">
<img src="https://via.placeholder.com/150x40" alt="my img">
<img src="https://via.placeholder.com/150x40" alt="my img">
<img src="https://via.placeholder.com/150x40" alt="my img">
<img src="https://via.placeholder.com/150x40" alt="my img">
<img src="https://via.placeholder.com/150x40" alt="my img">
<img src="https://via.placeholder.com/150x40" alt="my img">
</p>
1. You need a container with text-align:justify; (a <p> paragraph in this case.)
2. Your images need to be display:inline-block; else they will not interact as "text" (in justify text last line is not affected you need to add one to make it works.)
3. You need a line of "text" under your images for justifying to apply, with pseudo-element you can achieve it easily by creating a *:after.
*:after :
Don't forget content:"";. Without it, it will not appear. In my example I've used an inline-block with width:100%. It will always break the line after the content in my paragraph.
Happy coding ! :)
Because no one mention in the previous answers. Nowadays (2017) and for awhile ago you can use CSS3 flexbox, by applying the property justify-content:space-between
div {
display: flex;
justify-content: space-between
}
<div>
<img src="https://picsum.photos/50" alt="foo" />
<img src="https://picsum.photos/50" alt="foo" />
<img src="https://picsum.photos/50" alt="foo" />
<img src="https://picsum.photos/50" alt="foo" />
<img src="https://picsum.photos/50" alt="foo" />
</div>
Images are displayed inline so you might as well use the text-align:justify css property to align your images with css. As others suggest, if you want to justify the final row you will have to insert some sort or blank image that takes up the full width at the end of your image list.
See http://fiddle.jshell.net/ewv6K/show/
<!DOCTYPE html>
<title>
Justified Images example
</title>
<style>
body {
text-align:center;
}
#container {
width:800px;
text-align:justify;
margin-left:auto;
margin-right:auto;
}
#force {
width:100%;
height:0px;
}
</style>
<div id="container">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/AfricanWildCat.jpg/220px-AfricanWildCat.jpg" alt="cat 1">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/WhiteCat.jpg/220px-WhiteCat.jpg" alt="cat 2">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Ojo_de_gata_trim.jpg/220px-Ojo_de_gata_trim.jpg" alt="cat 3">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Scheme_cat_anatomy-en.svg/220px-Scheme_cat_anatomy-en.svg.png" alt="cat 4">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Olhos_de_um_gato-3.jpg/220px-Olhos_de_um_gato-3.jpg" alt="cat 5">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Listen%2C_do_you_want_to_know_a_secret.jpg/220px-Listen%2C_do_you_want_to_know_a_secret.jpg" alt="cat 6">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/AfricanWildCat.jpg/220px-AfricanWildCat.jpg" alt="cat 1">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/WhiteCat.jpg/220px-WhiteCat.jpg" alt="cat 2">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Ojo_de_gata_trim.jpg/220px-Ojo_de_gata_trim.jpg" alt="cat 3">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Scheme_cat_anatomy-en.svg/220px-Scheme_cat_anatomy-en.svg.png" alt="cat 4">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Olhos_de_um_gato-3.jpg/220px-Olhos_de_um_gato-3.jpg" alt="cat 5">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Listen%2C_do_you_want_to_know_a_secret.jpg/220px-Listen%2C_do_you_want_to_know_a_secret.jpg" alt="cat 6">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/AfricanWildCat.jpg/220px-AfricanWildCat.jpg" alt="cat 1">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/WhiteCat.jpg/220px-WhiteCat.jpg" alt="cat 2">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Ojo_de_gata_trim.jpg/220px-Ojo_de_gata_trim.jpg" alt="cat 3">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Scheme_cat_anatomy-en.svg/220px-Scheme_cat_anatomy-en.svg.png" alt="cat 4">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Olhos_de_um_gato-3.jpg/220px-Olhos_de_um_gato-3.jpg" alt="cat 5">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Listen%2C_do_you_want_to_know_a_secret.jpg/220px-Listen%2C_do_you_want_to_know_a_secret.jpg" alt="cat 6">
<!-- Force the last row to be justifed - use a blank image here, not a real one like I have -->
<img id="force" src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Olhos_de_um_gato-3.jpg/220px-Olhos_de_um_gato-3.jpg" alt="end">
</div>
In justified text, the last line of text in a paragraph is not expanded to fill the whole width. So to make the inline images spread out you need enough content to pull the paragraph out to two or more lines, eg.:
<div>
<p>
<img src="image1.png" alt="foo" />
<img src="image2.png" alt="foo" />
<img src="image3.png" alt="foo" />
<img src="image4.png" alt="foo" />
<img src="image5.png" alt="foo" />
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>
</div>
(or some other equally-ugly but less-visible version involving .) This is a bit of a nasty hack.
I realise this is way out of date but just thought I'd add a simple solution.
text-align: justify will only work if there is more than one line (if you use this on a paragraph of text, you will see that the last line does not justify). This little jQuery extention will add an invisible element to the element you are trying to justify and thus, your images will be evenly spread:
$.fn.justify = function() {
$(this).css("text-align", "justify");
$(this).append("<span style='display: inline-block;visibility: hidden;width:100%'></span>");
}
Then all you need to do is call:
$("#your-element").justify();
This javascript will spread the images over the div from the middleand to the sides:
var container = document.getElementById("imageContainer");
var imageList = container.getElementsByTagName("img");
var totalWidth = container.offsetWidth;
var sliceWidth = totalWidth/imageList.length;
for( i = 0; i < imageList.length; i++)
{
var totalMargin = sliceWidth - imageList[i].offsetWidth;
var margin = totalMargin / 2;
imageList[i].style.margin = "0px " + margin + "px 0px " + margin + "px"
}
The script asume a couple of things;
There must be an ID of the div (imageContainer)
All the images must have the same width
For my convinience I only tested in IE7, there are things that I'm not sure about such as "offsetWidth" that may be different in Firefox etc. but this is mostly for you to get the concept of the script.
You could of course add support for variable image widths and so forth, but that wasn't really in the scope here.
This script will distribute the images evenly if you add or remove images, ofcourse to a limit. If the total width of the images is greater than the width of the div, there will be wrapping.
Hope it helps!
<!-- not elegant -->
<div style="color:backgroundcolor">
<p>
<img src="image1.png" alt="foo"
/><em>.</em>
<img src="image2.png" alt="foo"
/><em>.</em>
<img src="image3.png" alt="foo"
/><em>.</em>
<img src="image4.png" alt="foo"
/><em>.</em>
<img src="image5.png" alt="foo" />
</p>
</div>
My CSS:
div { width: 30em; }
p { text-align: justify; }
Related
<div id="divT">
<img class="divTimg" src="divT/00.jpg" alt="img">
<img class="divTimg" src="divT/01.jpg" alt="img">
<img class="divTimg" src="divT/02.jpg" alt="img">
<img class="divTimg" src="divT/03.jpg" alt="img">
<img class="divTimg" src="divT/04.jpg" alt="img">
<img class="divTimg" src="divT/05.jpg" alt="img">
<div class="clear"></div>
</div>
css
#divT{
overflow-x:hidden;
}
.divTimg{
float:left;
width:17%;
cursor:pointer;
border-right:2px ridge gold;
}
05.jpg is placed in a new line, bellow the rest of images, but I need to keep them all in one line, and if there is no space enough - the last image should be visible partly.
I tried with various values of overflow-x for the parrent div, but without success.
To achieve the 'scrolling off to the side effect' you need to create a wrapper element, that contains a much wider element that then contains your images. This then allows you to shrink or grow the visible section, while having the hidden content appear scrollable.
<div class="scroll">
<div class="scroll_wrapper">
<img class="scroll_image" src="" />
<img class="scroll_image" src="" />
<img class="scroll_image" src="" />
<img class="scroll_image" src="" />
<img class="scroll_image" src="" />
<img class="scroll_image" src="" />
<img class="scroll_image" src="" />
<img class="scroll_image" src="" />
<img class="scroll_image" src="" />
// images
</div>
</div>
And then the CSS
.scroll {
width: 200px; // how much you want to see at once
overflow: auto;
}
.scroll_wrapper {
width: 600px; // this can be any number higher than the total width of the elements inside it
}
.scroll_image {
background: red;
height: 10px;
width: 50px; // just to test the scrolling
}
The jsfiddle for this can be found here
Just wrap your image list with another wrapper:
<div id="wrapper">
<div id="divT">
<img class="divTimg" src="divT/00.jpg" alt="img">
<img class="divTimg" src="divT/01.jpg" alt="img">
<img class="divTimg" src="divT/02.jpg" alt="img">
<img class="divTimg" src="divT/03.jpg" alt="img">
<img class="divTimg" src="divT/04.jpg" alt="img">
<img class="divTimg" src="divT/05.jpg" alt="omg">
<div class="clear"></div>
</div>
</div>
Add some styles:
#wrapper {
overflow:hidden;
}
#divT {
width:105%;
}
I have been trying to achieve getting 3 images side by side. I finally got it the exact way I want them laid out. A few ways I tried, one image would always move down on smaller screens. They way I have it now is the exact way I want but the code i used is a bit messed up(not even sure if correct but it works).
My code has 4 images and just 3 show up. Again it shows up the way I want. The image that doesn't show up is the 2 one in the code. I dont want the image to show up anyways but I know it shouldnt be in there either.
I struggle with this stuff so any help on how this should read correctly is appreciated.
When I remove the 2 image in the code they all go out of line.
<div id="content">
<center><div><br><br><br><br><br><br>
<img src="images/image1.png" width="30%" style="float:left;/> <img src="images/image2.png" width="50%" style="float:left;"/>
</div>
<img src="images/image3.png" width="30%"/><img src="images/image2" width="30%" style="float:right;"/>
</div>
</center>
<br><br><br><br><br><br><br><br><br></div>
</div>
<div id="content" width="100%">
<div>
<img src="1.jpg" width="30%" style="float:left"/>
<img src="2.jpg" width="30%" style="float:left"/>
<img src="3.jpg" width="30%" style="float:left"/>
</div>
</div>
Here is the simplest and clean code...
fiddle :http://jsfiddle.net/ag3Et/1/
css
#content{
width:100%;
float:left;
}
#content img{
width:32%;
margin-left:1%;
float:left;
}
html
<div id="content">
<img src="http://www.birds.com/wp-content/uploads/home/bird4.jpg"/>
<img src="http://www.hdwallpapers3d.com/wp-content/uploads/2013/05/HD-Birds-wallpaper-3.jpg"/>
<img src="http://www.oassf.com/en/media/images/birds_wallpaper.jpg"/>
</div>
This is the answer for your ques.. please mark it as an answer after using this code so that others can also use it in future...
<div id="content">
<center><div><br><br><br><br><br><br>
<img src="1.jpg" width="30%" style="float:left;"/>
<img src="2.jpg" width="30%"/>
<img src="3.jpg" width="30%" style="float:right;"/>
</div>
</center>
</div>
<br><br><br><br><br><br><br><br><br></div>
</div>
You should definitely brush up on your html and css.
You need to set fixed pixel values so your images can fit into place and stay as you would like them to.
CSS:
#content{ width: 960xpx; margin:30px auto; } //the margin is to center this whole block
img{ width: 320px; float:left;} //each image is defined as a fixed 320px
.clear{ clear: both; } //makes sure things don't overlap
HTML:
<div id="content">
<img src="images/image1.png"/>
<img src="images/image2.png"/>
<img src="images/image3.png"/>
<div class="clear">
<!-- SOME OTHER CONTENT HERE -->
</div>
</div>
I am trying to create a vertical stack of image thumbnails. One thumbnail per line.
I am trying to upgrade my CSS skills. I have this working with a table using
<table>
<tr>
<td><img /></td>
</tr>
<tr>
<td><img /></td>
</tr>
<tr>
<td><img /></td>
</tr>
</table>
I'd like to not use a table and accomplish this using divs and CSS. This was I have better control over the spacing and layout in the future.
Any thoughts?
Very simple:
<div><img /></div>
<div><img /></div>
<div><img /></div>
A div is a block level element. Unless you specified other wise it acts similarly to a <tr> tag
Use a simple div and put some id's for every img. In CSS for the same you can modify the properties of the different id.
I would recommend you start by learning about DIVs and their properties. W3 Schools is a good start.
To get started with yours simply do:
<div>
<img src="" />
</div>
<div>
<img src="" />
</div>
<div>
<img src="" />
</div>
DIVs by default are treated as block elements meaning they start on a new line automatically. So if you want them to appear inline then you will need to specify that by either using display: inline-block; or float:left;
Use divs/sections, define how many columns you want, lets say 4 columns...
http://jsfiddle.net/tBDjV/
<div class="col-1">
<img />
<img />
<img />
</div>
<div class="col-2">
<img />
<img />
<img />
</div>
<div class="col-3">
<img />
<img />
<img />
</div>
<div class="col-4 last">
<img />
<img />
<img />
</div>
.col-1, .col-2, .col-3, .col-4 {
float: left;
width: 22%;
margin-right: 4%;
box-sizing: border-box;
}
.last {
margin-right: 0;
}
I don't always do web development, but when I do CSS is the most frustrating thing I can imagine. I'm trying to create a simple class to hold an image together with description. I want to have two rows, each with three images. Very simple.
Here's my code for displaying images only, which works ok.
img {
position: relative;
margin: 0 auto;
max-width: 650px;
padding: 5px;
margin: 10px 0 5px 0;
border: 1px solid #ccc;
}
<h3>Screenshots</h3>
<p>
<img src="images/img1.png" width="200" height="140">
<img src="images/img2.png" width="200" height="140">
<img src="images/img3.png" width="200" height="140">
<img src="images/img4.png" width="200" height="140">
<img src="images/img5.png" width="200" height="140">
<img src="images/img6.png" width="200" height="140">
</p>
<h3>Installation</h3>
This shows images exactly as I want, three in each row and then there's a padding from < p > and then Installation section. To get description under images in the same div I changed img in css to div.img and htm code to:
<h3>Screenshots</h3>
<p>
<div class="img">
<a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a>
</div>
<div class="img">
<a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a>
</div>
<div class="img">
<a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a>
</div>
<div class="img">
<a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a>
</div>
<div class="img">
<a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a>
</div>
<div class="img">
<a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a>
</div>
</p>
<h3>Installation</h3>
One would have thought that the resulting webpage is going to be exactly the same as img in the first case and div.img in the second have the same attributes. It is not the case though. With this code I get each div stretched to the full width of the column and images are one under the other at the left side of the div.
I have also tried this code: http://www.w3schools.com/CSS/css_image_gallery.asp, but in this case I get Installation and all the text that follows go onto the images, ignoring < p > tag which has bottom margin.
To keep it simple: replace your divs with <span> elements, or set display: inline on your CSS for the divs. This will make them behave as you expected (as inline, not block elements).
Also:
You don't need the margin: 0 auto. It won't center inline elements as it does with block elements
You added position: relative, but don't seem to need it, either. Unless you intend to apply absolute position to something inside the div at a later point.
Here is a jsfiddle without these two properties, and adding display: inline to the divs: http://jsfiddle.net/3BwKY/.
This is completely stumping me. I'm pretty new to CSS & DIVs so please bear with me.
I'm trying to make a DIV-based image gallery.
The layout is as follows...
<div id="container">
<div class="row">
<div class="img-container">
img
</div>
...more img-containers
</div>
...more rows
</div>
The images are all in thumbnail form but the thumbnails vary in size (but all less than 150x150px) which seems to rule out all of the vertical-align solutions I've found, especially when combined with the fact that the row divs and the container are statically positioned.
I'm sorry if this has been asked somewhere before but I have looked through both this site and Google for hours and haven't found anything that seems to work.
Thanks in advance for any help!
EDIT3: For reference, the site I'm working on is here: http://utsa.edu/honors/?page=international/china_new
EDIT1: #Robert: Thanks for the class/id suggestion. Changed that. I don't believe the vertical centering you suggested is going to work though. Since your images are all the same size the padding & margins center them. Mine are all different heights.
EDIT2: #Nowhere: That was the first thing I tried. From what I've read, it's not working because the containing DIVs aren't positioned absolute. I don't know though.
.img-container img {vertical-align: middle ;} works fine for me with images of different heights and widths. Their vertical centers are correctly aligned...
If you don't find a solution within CSS, you might want to consider having a program generate images from the existing thumbnails: you convert them to images of the size of the biggest ones, surrounding the smaller ones with a transparent border (in a format that supports transparency like PNG).
I would use a combination of floating each image container left within the row div and auto center the images within the image container.
Here's how I might do it. I recommend you change any div id to a div class if you plan on using it more than once in your document.
<html>
<head>
<title></title>
<style type="text/css">
body {
background-color: #666;
text-align: center;
}
#container {
background-color: #fff;
width: 960px;
margin: 0 auto;
overflow: hidden;
padding: 10px;
}
.row {
clear: both;
padding: 15px 0;
}
.img-container {
float: left;
width: 33%;
}
</style>
</head>
<body>
<div id="container">
<div class="row">
<div class="img-container">
<img src="images/image1.jpg" alt="image1" width="150" height="200" />
</div>
<div class="img-container">
<img src="images/image1.jpg" alt="image1" width="150" height="200" />
</div>
<div class="img-container">
<img src="images/image1.jpg" alt="image1" width="150" height="200" />
</div>
</div>
<div class="row">
<div class="img-container">
<img src="images/image1.jpg" alt="image1" width="150" height="200" />
</div>
<div class="img-container">
<img src="images/image1.jpg" alt="image1" width="150" height="200" />
</div>
<div class="img-container">
<img src="images/image1.jpg" alt="image1" width="150" height="200" />
</div>
</div>
<div class="row">
<div class="img-container">
<img src="images/image1.jpg" alt="image1" width="150" height="200" />
</div>
<div class="img-container">
<img src="images/image1.jpg" alt="image1" width="150" height="200" />
</div>
<div class="img-container">
<img src="images/image1.jpg" alt="image1" width="150" height="200" />
</div>
</div>
</div>
</body>