So I'm trying to align some images side by side without have gaps vertically.
Each image width is 20% of the page (5 per a row), and the height varies between the images.
Is there any way of aligning them vertically as well (so that each image is directly below the one above it without a gap, as because of the random heights, all images on a row start where the photo with the largest height above ends)?
css for the photo
.photo {width:20%; height:auto;
margin: 0;
padding: 0;
float:left;
}
the photo
<img src="" alt="image" style="max-width:100%; max-height:100%;" class="photo">
you can emulate table, and for cell set vertical-align:middle;
<div class="table">
<div class="cell">
<img src="" alt="image" class="photo">
</div>
...
</div>
and css for it
.table{
display: table;
}
.cell {
display: table-cell;
vertical-align: middle;
}
.photo{
max-width: 100%;
max-height: 100%
}
example https://jsfiddle.net/nardist01/2f7yd20e/2/
you see the example here
.photo {
width:20%;
height:auto;
margin: 0;
padding: 0;
float:left;
}
I've two divs. It contains two chart with width 800px and height 400px each. I want them horizontally aligned.
Also, they shouldn't change there alignment or image size if monitor/browser size changes. Automatic horizontal scroll bar (or vertical if required) should come.
I've tried many options but couldn't get what I am looking for. :(
<style type="text/css">
#container{
font-size: 28px;
width:100%;
height:100%;
text-align: center;
}
#left{
display:inline-block;
width:50%;
margin:0;
}
#right{
display:inline-block;
width:50%;
text-wrap:none;
}
This is the latest version of CSS I tried.
From what I understand, this should satisfy what you're looking for. Here's a working example in JSFiddle. I've added notes to the CSS to describe how I got it to work.
#container{
/* Since you know the width of the images, we can set
the container width. This will force the browser to
draw a horizontal scrollbar when the width is too small */
width: 1600px;
/* This is a little trick to make the container as large
as the elements inside it, even though they are set to
float: left */
overflow: hidden;
}
#left,
#right{
/* display: inline-block does not work because is adds space
around each element, making them wider than the container and
forcing the second image down below the first, so we can use
float: left instead */
float: left;
width: 50%;
}
<div id="container">
<div id="left"><img src="http://placehold.it/800x400" /></div>
<div id="right"><img src="http://placehold.it/800x400/444444" /></div>
</div>
display:flex and margin will do the trick here. And remove width:50%; if do not want to change image size.
Check following: Here i change image size to display properly.
#container {
display: flex;
font-size: 28px;
height: 100%;
text-align: center;
width: 100%;
}
#container > div {
margin: 0 5px;
}
img{
width:400px;
height:200px;
}
<div id="container">
<div id="left"><img src="http://placehold.it/100x100" /></div>
<div id="right"><img src="http://placehold.it/100x100" /></div>
</div>
Working Fiddle
Display inline-block will work, here is an example: https://jsfiddle.net/w913sbro/
You can also try adding this to your #container:
display:flex;
as by default flex will align in row style.(horizontal).
Would be great if you could show us what you have tried. Anyways I hope this is what you are expecting. demo here
<div class="row">
<div class="container">
<div id="1" class="box left">
<img src="http://placehold.it/100x100" height="800" width="400">
</div>
<div id="1" class="box right">
<img src="http://placehold.it/100x100" height="800" width="400">
</div>
</div>
</div>
Need help centering these images in CSS
I have been trying to center them by using a div id tag
<div id="centerLeftAboutPic">
<div class="single-about-detail clearfix">
<div class="about-img">
<img src="img/AttyRLev.jpg" alt="">
</div>
<div class="about-details">
<div class="pentagon-text">
<h1>R</h1>
</div>
<h3>Atty Rob Lev</h3>
<p>Click here to learn more about robert lev</p>
</div>
</div>
</div>
I also created a separate div ID for the second picture. Here is the CSS for one of the images. Both images have similar css.
#centerLeftAboutPic {
float: right;
width: 320px;
padding-left: 30px;
position: relative;
}
I am new to web developing so I am still confused on positioning. Thank you.
You can use the below in your css
text-align:center
snippet
#centerLeftAboutPic {
text-align:center;
padding-left:30px;
position: relative;
border:solid black;
}
img{
width:50px;
height:50px;
margin-left:70px;
}
<div id="centerLeftAboutPic">
<img class="img-responsive" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRH181kjqkxFXqYU4bTP8zdfiAfO4iceJrxA4lMPXMCKY61eX9v" /></a>
<img class="img-responsive" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRH181kjqkxFXqYU4bTP8zdfiAfO4iceJrxA4lMPXMCKY61eX9v" /></a>
<div>
</div>
If you want to center the image relative to its container then all you need to do is add this to its CSS.
#centerLeftAboutPic img {
margin-left: auto;
margin-right: auto;
display: block;
}
However it's only going to center it within the 320px container you gave it in #centerLeftAboutPic. If you adjusted that property to width: 100%; it will center it on the page.
Here's a fiddle for you. I set the width to 100% in the example, play around with it and you'll see what I mean: https://jsfiddle.net/v5k8rjy2/2/
If you want to center the entire #centerLeftAboutPic div you'll need to put the margins on the div its self and remove the float: right property. Here's a fiddle of that: https://jsfiddle.net/v5k8rjy2/5/
#centerLeftAboutPic {
width: 320px;
position: relative;
margin-left: auto;
margin-right: auto;
display: block;
}
Basically I want the text to always be centered in the middle. With one image on either side that resize depending on how large the page is to take up all the white space. This is what I have so far.
<div style="text-align:center;">
<img style="float: left; width: 33%; margin:20px 0 0 0;" src="img/pulse.gif"/>
<img style="float: right; width: 33%; margin:20px 0 0 0;" src="img/pulseR.gif"/>
<h1 style="display:inline; vertical-align: middle; text-align: center; width: 33%;">Safety</h1>
</div>
I would like to remove the width: 33% and for the images to resize to fit the space. Keep in mind it needs to be forced to stay on one line.
Thanks
You can use table and table-cell for display, or just classic html table.
There is example using table and table-cell for display (there is added extra divs for images and header) :
.container
{
width:100%;
display:table;
margin-top:20px;
}
.container div
{
display:table-cell;
text-align:center;
vertical-align:top;
}
.container img
{
width:100%;
height:100%;
}
<div class="container">
<div><img src="http://placehold.it/350x350"/></div>
<div><h1>Safety</h1></div>
<div><img src="http://placehold.it/350x350"/></div>
</div>
You can wrap images inside div containers like this:
<div style="text-align:center;">
<div class="left"> <img src="img/pulse.gif"/></div>
<h1>Safety</h1>
<div class="right">
<img src="src="img/pulseR.gif"/></div>
https://jsfiddle.net/uv85304v/
I want to float a div to center. Is it possible? text-align: center is not working in IE.
There is no float to center per se. If you want to center a block element inside another do this:
<div id="outer">
<div id="inner">Stuff to center</div>
</div>
with:
#outer { width: 600px; }
#inner { width: 250px; margin: 0 auto; }
Now that won't make the text wrap around it (like it would with a float left or right) but like I said: there is no float center.
This has always worked for me.
Provided you set a fixed width for your DIV, and the proper DOCTYPE, try this
div {
margin-left:auto;
margin-right:auto;
}
Hope this helps.
The usual technique for this is margin:auto
However, old IE doesn't grok this so one usually adds text-align: center to an outer containing element. You wouldn't think that would work but the same IE's that ignore auto also incorrectly apply the text align center to block level inner elements so things work out.
And this doesn't actually do a real float.
floating divs to center "works" with the combination of display:inline-block and text-align:center.
Try changing width of the outer div by resizing the window of this jsfiddle
<div class="outer">
<div class="block">one</div>
<div class="block">two</div>
<div class="block">three</div>
<div class="block">four</div>
<div class="block">five</div>
</div>
and the css:
.outer {
text-align:center;
width: 50%;
background-color:lightgray;
}
.block {
width: 50px;
height: 50px;
border: 1px solid lime;
display: inline-block;
margin: .2rem;
background-color: white;
}
Following solution worked for me.
.algncenterdiv {
display: block;
margin-left: auto;
margin-right: auto;
}
One of my websites involves a div whose size is variable and you won't know it ahead of time. it is an outer div with 2 nested divs, the outer div is the same width as the first nested div, which is the content, and the second nested div right below the content is the caption, which must be centered. Because the width is not known, I use jQuery to adjust accordingly.
so my html is this
<div id='outer-container'>
<div id='inner-container'></div>
<div id='captions'></div>
</div>
and then I center the captions in jQuery like this
captionWidth=$("#captions").css("width");
outerWidth=$("#outer-container").css("width");
marginIndent=(outerWidth-captionWidth)/2;
$("#captions").css("margin","0px "+marginIndent+"px");
Use "spacer" divs to surround the div you want to center. Works best with a fluid design. Be sure to give the spacers height, or else they will not work.
<style>
div.row{width=100%;}
dvi.row div{float=left;}
#content{width=80%;}
div.spacer{width=10%; height=10px;}
</style>
<div class="row">
<div class="spacer"></div>
<div id="content">...</div>
<div class="spacer"></div>
</div>
This worked for me..
div.className {
display: inline-block;
margin: auto;
}
this could help you..:D
div#outer {
width:200px;
height:200px;
float:left;
position:fixed;
border:solid 5px red;
}
div#inner {
border:solid 5px green;
}
<div id="outer">
<center>
<div id="inner">Stuff to center</div>
</center>
</div>
No, it isn't.
You can either have content bubble up to the right of an element (float: left) or to the left of an element (float: right), there is no provision for having content bubble up on both sides.
<div id="outer" style="z-index:10000;width:99%;height:200px;margin-top:300px;margin-left:auto;margin-right:auto;float:left;position:absolute;opacity:0.9;">
<div id="inner" style="opacity:1;background-color:White;width:300px;height:200px;margin-left:auto;margin-right:auto;">Inner</div></div>
Float the div in the background to the max width, set a div inside that that's not transparent and center it using margin auto.
this works nicely
width:40%; // the width of the content div
right:0;
margin-right:30%; // 1/2 the remaining space
This resizes nicely with adaptive layouts also..
CSS example would be:
.centered-div {
position:fixed;
background-color:#fff;
text-align:center;
width:40%;
right:0;
margin-right:30%;
}
This worked for me.
I included an unordered list on my page twice.
One div class="menu" id="vertical" the other to be centered was div class="menu" id="horizontal". Since the list was floated left, I needed an inner div to center it. See below.
<div class=menu id="horizontal">
<div class="fix">
Centered stuff
</div>
</div>
.menu#horizontal { display: block; float: left; margin: 0px; padding: 0 10px; position: relative; left: 50%; }
#fix { float: right; position: relative; left: -50%; margin: 0px auto; }
Try this, it helped me: wrap the div in tags, the problem is that it will center the content of the div also (if not coded otherwise). Hope that helps :)