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>
Related
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>
<div id="travel_photos">
<img style="display: inline; margin: 0 10px; title="branson" src="branson.jpg" alt="" width="150" height="75"/>
<img style="display: inline; margin: 0 10px; title="cancun" src="cancun.jpg" alt="" width="150" height="75"/>
<img style="display: inline; margin: 0 10px; title="denver" src="denver.png" alt="" width="150" height="75"/>
<img style="display: inline; margin: 0 10px; title="destin" src="destin.png" alt="" width="150" height="75"/>
<img style="display: inline; margin: 0 10px; title="PV" src="PV.png" alt="" width="150" height="50"/>
</div>
This is what is in my html. I don't know how to get them to css. I have tried the # but nothing will change when I put it in CSS. What does my CSS need to look like?
You are missing a quote in all of your statements.
<div id="travel_photos">
<img style="display: inline; margin: 0 10px;" title="branson" src="branson.jpg" alt="" width="150" height="75"/>
<img style="display: inline; margin: 0 10px;" title="cancun" src="cancun.jpg" alt="" width="150" height="75"/>
<img style="display: inline; margin: 0 10px;" title="denver" src="denver.png" alt="" width="150" height="75"/>
<img style="display: inline; margin: 0 10px;" title="destin" src="destin.png" alt="" width="150" height="75"/>
<img style="display: inline; margin: 0 10px;" title="PV" src="PV.png" alt="" width="150" height="50"/>
</div>
should work. Notice the addition of the " mark after the final semicolon before title attribute.
I'm trying to display two columns side by side (the one on the left has 4 items and the one on the right has 3, totalling 7 items altogether) and I have:
#wrap{
width:600px;
margin:0px auto;
column-count: 2;
}
#left_col {
float:left;
width:200px;
}
#right_col{
float: right;
width: 200px;
}
<div id="wrap">
<div id="left_col">
<img src="number1.png"alt="number1" border="0" align="top" height="65" width="75"/>num1
<img src="number2.png"alt="number2" border="0" align="top" height="65" width="75"/>num2
<img src="number3.png"alt="number3" border="0" align="top" height="75" width="65"/>num3
<img src="number4.png"alt="number4" border="0" align="top" height="65" width="75"/>num4
</div>
<div id="right_col">
<img src="num1.png"alt="num1" border="0" align="top" height="65" width="75"/>number1
<img src="num2.png"alt="num2" border="0" align="top" height="65" width="75"/>number2
<img src="num3.png"alt="num3" border="0" align="top" height="65" width="75"/>number3
</div>
</div>
And my problem is that when I run it, the links/images/text in the left_col doesn't seem to be displayed as one item on each row like in the right_col and it's not showing the text together as it seems to be on the line below it.
Add display:block on the a tag:
#wrap{
width: 600px;
margin: 0px auto;
}
#left_col {
float: left;
width: 200px;
}
#right_col{
float: right;
width: 200px;
}
a {
display: block;
}
<div id="wrap">
<div id="left_col">
<img src="http://lorempixel.com/75/65/technics/1" alt="number1" height="65" width="75"/> Number 1
<img src="http://lorempixel.com/75/65/technics/2" alt="number2" height="65" width="75"/> Number 2
<img src="http://lorempixel.com/65/75/technics/3" alt="number3" height="75" width="65"/> Number 3
<img src="http://lorempixel.com/75/65/technics/4" alt="number4" height="65" width="75"/> Number 4
</div>
<div id="right_col">
<img src="http://lorempixel.com/75/65/technics/5" alt="num1" height="65" width="75"/> Number 1
<img src="http://lorempixel.com/75/65/technics/6" alt="num2" height="65" width="75"/> Number 2
<img src="http://lorempixel.com/75/65/technics/7" alt="num3" height="65" width="75"/> Number 3
</div>
</div>
Though, ideally you should do this using lists.
#wrap{
width:600px;
margin:0px auto;
column-count: 2;
}
#left_col {
float:left;
width:200px;
}
#left_col a {
display: block;
}
#right_col{
float: right;
width: 200px;
}
<div id="wrap">
<div id="left_col">
<img src="number1.png"alt="number1" border="0" align="top" height="65" width="75"/>num1
<img src="number2.png"alt="number2" border="0" align="top" height="65" width="75"/>num2
<img src="number3.png"alt="number3" border="0" align="top" height="75" width="65"/>num3
<img src="number4.png"alt="number4" border="0" align="top" height="65" width="75"/>num4
</div>
<div id="right_col">
<img src="num1.png"alt="num1" border="0" align="top" height="65" width="75"/>number1
<img src="num2.png"alt="num2" border="0" align="top" height="65" width="75"/>number2
<img src="num3.png"alt="num3" border="0" align="top" height="65" width="75"/>number3
</div>
</div>
Put 150 px for the width of your columns:
#wrap{
width:600px;
margin:0px auto;
column-count: 2;
}
#left_col {
float:left;
width:150px;
}
#right_col{
float: right;
width: 150px;
}
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; }
I have three images that I want to display in a single row next to each other.
Here is the HTML:
<div id="client_logos">
<img style="display: inline; margin: 0 5px;" title="heartica_logo" src="https://s3.amazonaws.com/rainleader/assets/heartica_logo.png" alt="" width="150" height="50" />
<img style="display: inline; margin: 0 5px;" title="mouseflow_logo" src="https://s3.amazonaws.com/rainleader/assets/mouseflow_logo.png" alt="" width="150" height="50" />
<img style="display: inline; margin: 0 5px;" title="piiholo_logo" src="https://s3.amazonaws.com/rainleader/assets/piiholo_logo.png" alt="" width="150" height="50" />
</div>
Here is the CSS:
#client_logos { display: inline-block; }
For some reason, it only displays two logos next to each other. Not sure what's wrong. Any ideas?
URL: http://rainleader.com/who-we-are/
See screenshot.
You have a line break <br> in-between the second and third images in your markup. Get rid of that, and it'll show inline.
The code you have posted here and code on your site both are different. There is a break <br> after second image, so the third image into new line, remove this <br> and it will display correctly.
Place this css in your page:
<style>
#client_logos {
display: inline-block;
width:100%;
}
</style>
Replace
<p><img class="alignnone" style="display: inline; margin: 0 10px;" title="heartica_logo" src="https://s3.amazonaws.com/rainleader/assets/heartica_logo.png" alt="" width="150" height="50" /><img class="alignnone" style="display: inline; margin: 0 10px;" title="mouseflow_logo" src="https://s3.amazonaws.com/rainleader/assets/mouseflow_logo.png" alt="" width="150" height="50" /><img class="alignnone" style="display: inline; margin: 0 10px;" title="mouseflow_logo" src="https://s3.amazonaws.com/rainleader/assets/piiholo_logo.png" alt="" width="150" height="50" /></p>
To
<div id="client_logos">
<img style="display: inline; margin: 0 5px;" title="heartica_logo" src="https://s3.amazonaws.com/rainleader/assets/heartica_logo.png" alt="" width="150" height="50" />
<img style="display: inline; margin: 0 5px;" title="mouseflow_logo" src="https://s3.amazonaws.com/rainleader/assets/mouseflow_logo.png" alt="" width="150" height="50" />
<img style="display: inline; margin: 0 5px;" title="piiholo_logo" src="https://s3.amazonaws.com/rainleader/assets/piiholo_logo.png" alt="" width="150" height="50" />
</div>