I am working on a website, and I would like to align 4 circles in the center of the content area. The example can be found at invisionbilling.com/stackoverflow. I have something right now that does the job, but I know there will be issues with different window sizes, different picture sizes, etc. How do I set the height of the div container to automatically wrap around the 4 circles/images? Is there a way to automatically center it using margin-left and margin-right? I tried "auto" for all of these and it wasn't doing the job. Thanks!
HTML
<div class="wrapper">
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-
Circles-Lower-Costs-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-358" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-
Circles-Greater-Cash-Flow-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-363" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-
Circles-Increased-Revenue-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-364" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-
Circles-Emphasis-on-Patient-Care-300x300.png" alt="" width="150"
height="150" class="alignnone size-medium wp-image-361" />
</div>
</div>
CSS
.circles {
display: block !important;
float: left !important;
margin: 10px !important;
}
.wrapper {
height: 175px;
width: 100%;
margin-left: 225px;
}
Try flexbox instead of floating, and try never to use !important:
<!DOCTYPE html>
<html>
<head>
<style>
.circles {
margin: 10px;
}
.wrapper {
height: 175px;
width: 100%;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-Circles-Lower-Costs-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-358" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-Circles-Greater-Cash-Flow-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-363" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-Circles-Increased-Revenue-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-364" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-Circles-Emphasis-on-Patient-Care-300x300.png" alt="" width="150"
height="150" class="alignnone size-medium wp-image-361" />
</div>
</div>
</body>
</html>
Related
I have a screenshot as shown below which I am trying to replicate in html/css:
At this moment, I am able to get everything in fiddle with green and orange arrows not properly aligned.
The CSS codes which I have used in order align arrows and desktop in a straight line are:
.tvs
{
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
Problem Statement:
I am wondering what changes I should make in the fiddle so that I am able to align green and orange arrows in a straight line in between the desktops.
You can wrap them in one div element and use text-align: center on that div.
.tvs {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
.arrows-element {
text-align: center;
}
<div class="tvs">
<div class="arrows">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/End-Arrows-left.png" alt="" width="49" height="62" class="aligncenter size-full wp-image-8105" />
</div>
<div class="tv">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Tv-Screen-2.png" alt="" width="177" height="129" class="aligncenter size-full wp-image-8081" />
</div>
<div class="arrows-element">
<div class="green-arrow">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/green-arrow.png" alt="" width="49" height="24" class="aligncenter size-full wp-image-8109">
</div>
<div class="orange-arrow">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/orange-arrow-v1.png" alt="" width="126" height="24" class="aligncenter size-full wp-image-8114" />
</div>
</div>
<div class="tv">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Tv-Screen-2.png" alt="" width="177" height="129" class="aligncenter size-full wp-image-8081" />
</div>
<div class="arrows-element">
<div class="green-arrow">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/green-arrow.png" alt="" width="49" height="24" class="aligncenter size-full wp-image-8109">
</div>
<div class="orange-arrow">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/orange-arrow-v1.png" alt="" width="126" height="24" class="aligncenter size-full wp-image-8114" />
</div>
</div>
<div class="tv">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Tv-Screen-2.png" alt="" width="177" height="129" class="aligncenter size-full wp-image-8081" />
</div>
<div class="arrows-element">
<div class="green-arrow">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/green-arrow.png" alt="" width="49" height="24" class="aligncenter size-full wp-image-8109">
</div>
<div class="orange-arrow">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/orange-arrow-v1.png" alt="" width="126" height="24" class="aligncenter size-full wp-image-8114" />
</div>
</div>
<div class="tv">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Tv-Screen-2.png" alt="" width="177" height="129" class="aligncenter size-full wp-image-8081" />
</div>
<div class="arrows">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/End-Arrows-right.png" alt="" width="49" height="62" class="aligncenter size-full wp-image-8105" />
</div>
</div>
How do I make these photos all go in the center of the webpage? this is my html code
<html>
<body>
<div id="travel_photos">
<img style="display: inline; margin: 0 10px; title="branson" src="branson.jpg" alt="" width="150" height="50"/>
<img style="display: inline; margin: 0 10px; title="cancun" src="cancun.jpg" alt="" width="150" height="50"/>
<img style="display: inline; margin: 0 10px; title="denver" src="denver.png" alt="" width="150" height="50"/>
<img style="display: inline; margin: 0 10px; title="destin" src="destin.png" alt="" width="150" height="50"/>
<img style="display: inline; margin: 0 10px; title="PV" src="PV.png" alt="" width="150" height="50"/>
</body>
</html>
If you're trying to center the images horizontally, try this: https://jsfiddle.net/a5u3q1w5/2/
HTML:
<div id="travel_photos">
<img title="branson" src="http://www.catster.com/wp-content/uploads/2017/08/A-fluffy-cat-looking-funny-surprised-or-concerned.jpg"/>
<img title="branson" src="http://www.petmd.com/sites/default/files/petmd-cat-happy-13.jpg"/>
<img title="branson" src="https://static.pexels.com/photos/126407/pexels-photo-126407.jpeg"/>
</div>
CSS:
#travel_photos > img {
width: 300px;
height: 100px;
margin: 0 auto;
display: block;
}
Please try this:
<html>
<body>
<img style="display: block; margin:auto;" title="branson" src="branson.jpg" alt="" width="150" height="50"/>
<img style="display: block; margin:auto;" title="cancun" src="cancun.jpg" alt="" width="150" height="50"/>
<img style="display: block; margin:auto;" title="denver" src="denver.png" alt="" width="150" height="50"/>
<img style="display: block; margin:auto;" title="destin" src="destin.png" alt="" width="150" height="50"/>
<img style="display: block; margin:auto;" title="PV" src="PV.png" alt="" width="150" height="50"/>
</body>
</html>
I am trying to have three images centered in a row and then centered on the page. I've got them all in a row but I cannot get them centered. Any suggestions on getting my group to the middle? I tried 0 auto on the contain class and on the social class. so close!!
My HTML: first thing is div class=contain to wrap the whole thing, but for some reason if I try to include the class contain in HTML it disppears on Stack Overflow so excuse that.
.contain {
max-width: 960px;
text-align: center;
}
.social {
position: relative;
display: inline-block;
float: left;
padding: 10px;
}
<div class="contain">
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-
content/uploads/2017/12/facebook.png" alt="" width="75" height="75" />
</div>
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-content/uploads/2017/12/twitter.png" alt="" width="75" height="75" />
</div>
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-
content/uploads/2017/12/instagram.png" alt="" width="75" height="75" />
</div>
</div>
What I would recommend is to make use of flexbox container for the elements.
With flexbox, all you need is three different styles in order to centralise elements both horizontally and vertically:
display: flex;
align-items: self;
justify-content: center;
Note that you'll also need to set a height on the container, so that the elements can actually fill the vertical space.
This can be seen in the following, with a border added to showcase the area that the .container element occupies:
.container {
display: flex;
align-items: center;
justify-content: center;
height: 200px;
border: 1px solid black;
}
.social {
position: relative;
display: inline-block;
float: left;
padding: 10px;
}
<div class="container">
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-
content/uploads/2017/12/facebook.png" alt="" width="75" height="75" />
</div>
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-content/uploads/2017/12/twitter.png" alt="" width="75" height="75" />
</div>
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-
content/uploads/2017/12/instagram.png" alt="" width="75" height="75" />
</div>
</div>
Hope this helps! :)
html
<div class="content">
<div>
<img src="facebook.png" alt="" width="75" height="75"/>
</div>
<div>
<img src="twitter.png" alt="" width="75" height="75"/>
</div>
<div>
<img src="instagram.png" alt="" width="75" height="75" />
</div>
</div>
css
.content {
text-align:center;
}
Maybe you can edit the css file, remove the float:left; :
.contain {
max-width:960px;
text-align:center;
}
.social {
position:relative;
display: inline-block;
padding: 10px;
}
<div align="center">
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-
content/uploads/2017/12/facebook.png" alt="" width="75" height="75" />
</div>
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-content/uploads/2017/12/twitter.png"
alt="" width="75" height="75" />
</div>
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-
content/uploads/2017/12/instagram.png" alt="" width="75" height="75" />
</div>
</div>
Using flex is a great solution, but here's a solution that uses what you already have. By removing float: left from your existing code we can get the desired result.
.contain {
max-width: 960px;
text-align: center;
}
.social {
display: inline-block;
padding: 10px;
}
<div class="contain">
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-
content/uploads/2017/12/facebook.png" alt="" width="75" height="75" />
</div>
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-content/uploads/2017/12/twitter.png" alt="" width="75" height="75" />
</div>
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-
content/uploads/2017/12/instagram.png" alt="" width="75" height="75" />
</div>
</div>
Keeping your current code, simply remove the flex: left: (JSFiddle example):
.contain {
max-width: 960px;
text-align: center;
}
.social {
position: relative;
display: inline-block;
padding: 10px;
}
If based on your browser compatibility requirements you can afford to use display: flex; (MDN) then that's the easiest way (jsfiddle example):
.contain {
display: flex;
justify-content: center;
}
.social {
padding: 10px;
}
There's an excellent flexbox tutorial here: flexbox froggy. Floats are pretty strange and I personally find flexes much more intuitive.
I am trying to create multiple photo galleries on one page. I can get the first gallery to work but when I try to add a second gallery neither of the pictures work. Could someone help me out and see what I have wrong or am missing? Thank you!
HTML:
<div class="gallery" align="center" id="gal1" >
<div class="thumbnails" id="thumb1" >
<img onmouseover="preview1.src=img1.src" name="img1" src="flower.jpg" alt="" />
<img onmouseover="preview1.src=img2.src" name="img2" src="blue_light.jpg" alt="" />
<img onmouseover="preview1.src=img3.src" name="img3" src="paintwithlight/JPEG/yellow-blue.jpg" alt="" />
<img onmouseover="preview1.src=img4.src" name="img4" src="paintwithlight/JPEG/abstract.jpg" alt="" />
<img onmouseover="preview1.src=img5.src" name="img5" src="paintwithlight/JPEG/angelin.jpg" alt="" />
<img onmouseover="preview1.src=img6.src" name="img6" src="paintwithlight/JPEG/anna.jpg" alt="" />
<img onmouseover="preview1.src=img7.src" name="img7" src="paintwithlight/JPEG/butterfly.jpg" alt="" />
<img onmouseover="preview1.src=img8.src" name="img8" src="paintwithlight/JPEG/clash.jpg" alt="" />
<img onmouseover="preview1.src=img9.src" name="img9" src="paintwithlight/JPEG/craze.jpg" alt="" />
<img onmouseover="preview1.src=img10.src" name="img10" src="paintwithlight/JPEG/dolphin.jpg" alt="" />
<img onmouseover="preview1.src=img11.src" name="img11" src="paintwithlight/JPEG/greenswirl.jpg" alt="" />
<img onmouseover="preview1.src=img12.src" name="img12" src="paintwithlight/JPEG/halfcircle.jpg" alt="" />
<img onmouseover="preview1.src=img13.src" name="img13" src="paintwithlight/JPEG/mindblown.jpg" alt="" />
<img onmouseover="preview1.src=img14.src" name="img14" src="paintwithlight/JPEG/mystic.jpg" alt="" />
<img onmouseover="preview1.src=img15.src" name="img15" src="paintwithlight/JPEG/radiation.jpg" alt="" />
<img onmouseover="preview1.src=img16.src" name="img16" src="paintwithlight/JPEG/rainbow.jpg" alt="" />
<img onmouseover="preview1.src=img17.src" name="img17" src="paintwithlight/JPEG/stuckcircle.jpg" alt="" />
<img onmouseover="preview1.src=img18.src" name="img18" src="paintwithlight/JPEG/swirl.jpg" alt="" />
<img onmouseover="preview1.src=img19.src" name="img19" src="paintwithlight/JPEG/whitelight.jpg" alt="" />
<img onmouseover="preview1.src=img20.src" name="img20" src="paintwithlight/JPEG/zeus.jpg" alt="" />
</div>
<div class="preview1" align="center">
<img name="preview1" src="flower.jpg" alt=""/>
</div>
</div>
<div class="gallery" align="center" id="gal2" >
<div class="thumbnails" id="thumb2" >
<img onmouseover="preview2.src=img1.src" name="img1" src="nature/JPEG/apple.jpg" alt="" />
<img onmouseover="preview2.src=img2.src" name="img2" src="nature/JPEG/cig.jpg" alt="" />
<img onmouseover="preview2.src=img3.src" name="img3" src="nature/JPEG/deadflower.jpg" alt="" />
<img onmouseover="preview2.src=img4.src" name="img4" src="nature/JPEG/halfnhalf.jpg" alt="" />
<img onmouseover="preview2.src=img5.src" name="img5" src="nature/JPEG/leaf.jpg" alt="" />
<img onmouseover="preview2.src=img6.src" name="img6" src="nature/JPEG/liveflower.jpg" alt="" />
<img onmouseover="preview2.src=img7.src" name="img7" src="nature/JPEG/mush.jpg" alt="" />
<img onmouseover="preview2.src=img8.src" name="img8" src="nature/JPEG/mushroom.jpg" alt="" />
<img onmouseover="preview2.src=img9.src" name="img9" src="nature/JPEG/pumpkin.jpg" alt="" />
<img onmouseover="preview2.src=img10.src" name="img10" src="nature/JPEG/redflower.jpg" alt="" />
<img onmouseover="preview2.src=img11.src" name="img11" src="nature/JPEG/rocks.jpg" alt="" />
<img onmouseover="preview2.src=img12.src" name="img12" src="nature/JPEG/silo.jpg" alt="" />
<img onmouseover="preview2.src=img13.src" name="img13" src="nature/JPEG/tree.jpg" alt="" />
<img onmouseover="preview2.src=img14.src" name="img14" src="nature/JPEG/tree2.jpg" alt="" />
<img onmouseover="preview2.src=img15.src" name="img15" src="nature/JPEG/tree3.jpg" alt="" />
<img onmouseover="preview2.src=img16.src" name="img16" src="nature/JPEG/water.jpg" alt="" />
<img onmouseover="preview2.src=img17.src" name="img17" src="nature/JPEG/yellowflower.jpg" alt="" />
</div>
<div class="preview" align="center">
<img name="preview2" src="nature/JPEG/apple.jpg" alt=""/>
</div>
</div>
CSS:
.thumbnails img {
height: 80px;
border: 4px solid #555;
padding: 1px;
margin: 0 10px 10px 0;
}
.thumbnails img:hover {
border: 4px solid #00ccff;
cursor:pointer;
}
.preview1 img {
border: 4px solid #444;
padding: 1px;
width: 800px;
}
.thumbnails #thumb2 img {
height: 80px;
border: 4px solid #555;
padding: 1px;
margin: 0 10px 10px 0;
}
.thumbnails #thumb2 img:hover {
border: 4px solid #00ccff;
cursor:pointer;
}
.preview2 img {
border: 4px solid #444;
padding: 1px;
width: 800px;
}
The name attribute on an <img> tag is obsolete in HTML5 and should not be used in production.
→ Use data-* attribute instead.
align attribute is obsolete or nonstandard
→ Use style text-align:center; instead
Inline JavaScript makes developing hard and code maintenance a nightmare.
→ Place your JavaScript code into <script>, away from your HTML tags.
Here's an example how to easily create multiple hover-able galleries:
function hoverGal() {
var bigID = this.parentNode.dataset.targetid;
document.getElementById(bigID).src = this.dataset.big;
}
[].forEach.call(document.querySelectorAll("[data-big]"), function(thumb) {
thumb.addEventListener("mouseenter", hoverGal, false);
});
<div data-targetid="big1">
<img src="//placehold.it/100x60/0fb" data-big="//placehold.it/360x200/0fb" alt="">
<img src="//placehold.it/100x60/fb0" data-big="//placehold.it/360x200/fb0" alt="">
<img src="//placehold.it/100x60/b0f" data-big="//placehold.it/360x200/b0f" alt="">
</div>
<img id="big1" src="//placehold.it/360x200/0fb">
<div data-targetid="big2">
<img src="//placehold.it/100x60/bf0" data-big="//placehold.it/360x200/bf0" alt="">
<img src="//placehold.it/100x60/f0b" data-big="//placehold.it/360x200/f0b" alt="">
<img src="//placehold.it/100x60/0bf" data-big="//placehold.it/360x200/0bf" alt="">
</div>
<img id="big2" src="//placehold.it/360x200/bf0">
That way you won't get into collision having duplicate thumbnails names / IDs or having to invent tons of different names.
I would like to know how to edit this code to show these pictures centered side by side with each download button centered and underneath each picture, If anybody knows how to edit the code to this, it would be appreciated. Thanks.
The website link that I uploaded the code to, to test it can be seen below:
http://www.tekmillion.com/albums.html
.clearfix {
clear: both;
}
.divWithBtn {
float: left;
text-align: center;
padding: 10px;
}
.divWithBtn img,
.divWithBtn a{
display: block;
margin: 0 auto;
}
<HR>
<div class="container">
</br>
<span class="textformat1"><center><b>Albums</b></span></center>
</br>
<center>
<div class="clear">
<div class="divWithBtn">
<img src="images/london%20To%20Turkey%20-%20Front%20Cover.jpg" alt="london%20To%20Turkey%20-%20Front%20Cover" width="200" height="200">
<a href="LONDON%202%20TURKEY%20VOL.1.zip">
<img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a>
</div>
<div class="divWithBtn">
<img src="images/LONDON%20TO%20TURKEY%20VOLUME%202%20(FRONT%20COVER).jpg" alt="LONDON%20TO%20TURKEY%20VOLUME%202%20(FRONT %20COVER)" width="200" height="200" border:none;>
<a href="LONDON%202%20TURKEY%20VOL.2.zip">
<img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a>
</div>
<div class="divWithBtn">
<img src="images/Love%20%26%20Hate%20Volume.1%20(Front%20Cover).JPG" alt="Love%20%26%20Hate%20Volume.1%20(Front %20Cover)" width="200" height="200">
<a href="LOVE%20%26%20HATE%20VOL.1.zip">
<img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a>
</div>
<div class="divWithBtn">
<img src="images/Gurbet%20Eli%20Volume.1%20(Front%20Cover).JPG" alt="Gurbet%20Eli%20Volume.1%20(Front%20Cover)" width="200" height="200">
<a href="GURBET%20ELI%20VOL.1.zip">
<img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a>
</div>
</div>
</center>
</br>
Add following css to your code:
This css will make image side by side.
.divWithBtn {
display: inline-block;
}
Following css will make download button below the image.
.divWithBtn > a {
display: block;
}
Hope it helps.
Note: And your current css which you post here is not applied. Make sure it is applied to your html element. Check path for your css file.
add class "display_table" to outer div.
<div class="clear" class="display_table">
add styles for the class "divWithBtn"
.divWithBtn {
float:left;
text-align:center;
margin: 0px 20px;
}
And finally add div to the image tag
<div><img height="200" width="200" src="images/london%20To%20Turkey%20-%20Front%20Cover.jpg" alt="london%20To%20Turkey%20-%20Front%20Cover"></div>
Finall output
<div class="clear" class="display_table">
<div class="divWithBtn">
<div><img height="200" width="200" src="images/london%20To%20Turkey%20-%20Front%20Cover.jpg" alt="london%20To%20Turkey%20-%20Front%20Cover"></div>
<img height="50" width="150" src="images/downloadbutton.png" alt="downloadbutton"> </div>
<div class="divWithBtn">
<div> <img height="200" width="200" src="images/LONDON%20TO%20TURKEY%20VOLUME%202%20(FRONT%20COVER).jpg" alt="LONDON%20TO%20TURKEY%20VOLUME%202%20(FRONT %20COVER)" border:none;=""></div>
<img height="50" width="150" src="images/downloadbutton.png" alt="downloadbutton"> </div>
<div class="divWithBtn">
<div><img height="200" width="200" src="images/Love%20%26%20Hate%20Volume.1%20(Front%20Cover).JPG" alt="Love%20%26%20Hate%20Volume.1%20(Front %20Cover)"></div>
<img height="50" width="150" src="images/downloadbutton.png" alt="downloadbutton"> </div>
<div class="divWithBtn">
<div><img height="200" width="200" src="images/Gurbet%20Eli%20Volume.1%20(Front%20Cover).JPG" alt="Gurbet%20Eli%20Volume.1%20(Front%20Cover)">
<div> <img height="50" width="150" src="images/downloadbutton.png" alt="downloadbutton"> </div>
</div>
</div>
</div>
Css
.display_table { display: table; }
.divWithBtn { float: left; text-align: center; margin: 0px 20px; }