I have tried different options that I have found in stackoverflow but none of them seems work for my porpouse.
This is what it happend:
Problem description
check this out
#christmas_promotion_boxes {width:1000px; margin:0 auto 0 auto; text-align:center;}
#christmas_promotion_boxes div
{
display:inline-block;
}
<div id="christmas_promotion_boxes">
<div id="christmas_promo_1">
<img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100">
</div>
<div id="christmas_promo_2">
<img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100">
</div>
<div id="christmas_promo_3">
<img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100">
</div>
</div>
Related
This question already has answers here:
How do I center floated elements?
(12 answers)
Closed 2 years ago.
Alignment of this div is floating on the left side but I want that to be in center on on desktop browser and in mobile browser too.
It floats on left on desktop browser.
It floats on left on mobile browser.
I just want that to be in center.
<style>
div.logolist {
float: left;
margin: 20;
}
</style>
<div>
<div class="logolist">
<img src="https://i.imgur.com/gCNG37l.png" width="100" height="100" alt="Screen 2">
<p style="text-align:center;">Secure</p>
</div>
<div class="logolist">
<img src="https://i.imgur.com/Vc8mFJS.png" width="100" height="100" alt="Screen 3">
<p style="text-align:center;">Guarantee</p>
</div>
<div class="logolist">
<img src="https://i.imgur.com/lc7YSqS.png" width="100" height="100" alt="Screen 3">
<p style="text-align:center;">Trust</p>
</div>
<div class="logolist">
<img src="https://i.imgur.com/MupBAPH.png" width="100" height="100" alt="Screen 3">
<p style="text-align:center;">Satisfaction</p>
</div>
<div class="logolist">
<img src="https://i.imgur.com/vGZi5RJ.png" width="100" height="100" alt="Screen 3">
<p style="text-align:center;">Refund</p>
</div>
</div>
float is designed to move an element to the side and let content that follows it flow up beside it.
It is a terrible tool to try to use for any other kind of layout.
For a long time, it was about the only tool we had for layout, but we've had Flexbox (for single dimension layouts) for years and support for Grid (for two dimension layouts) has good support these days.
Use Flexbox to lay the elements out.
.flex-container {
display: flex;
justify-content: center;
}
.logolist {
text-align: center;
}
<div class="flex-container">
<div class="logolist">
<img src="https://i.imgur.com/gCNG37l.png" width="100" height="100" alt="Screen 2">
<p>Secure</p>
</div>
<div class="logolist">
<img src="https://i.imgur.com/Vc8mFJS.png" width="100" height="100" alt="Screen 3">
<p>Guarantee</p>
</div>
<div class="logolist">
<img src="https://i.imgur.com/lc7YSqS.png" width="100" height="100" alt="Screen 3">
<p>Trust</p>
</div>
<div class="logolist">
<img src="https://i.imgur.com/MupBAPH.png" width="100" height="100" alt="Screen 3">
<p>Satisfaction</p>
</div>
<div class="logolist">
<img src="https://i.imgur.com/vGZi5RJ.png" width="100" height="100" alt="Screen 3">
<p>Refund</p>
</div>
</div>
Also, consider representing you list using actual list markup (ul/ol/li) instead of divs. Divs are generic block elements that should only be used as a last resort if no other HTML element has semantics that describe your content.
As another answer mentions, Flexbox is the modern option for laying out data and aligning it. In this case, Flexbox would be the better option, but this is without Flex.
First there is no need for float: left. You can replace with display: inline-block. margin: 0 auto with a width will center the container inside the page. You then add text-align: center to center the content inside the container <div>.
div.logolist {
display: inline-block;
}
.container {
margin: 0 auto;
width: 100%;
text-align: center;
}
<div class="container">
<div class="logolist">
<img src="https://i.imgur.com/gCNG37l.png" width="100" height="100" alt="Screen 2">
<p>Secure</p>
</div>
<div class="logolist">
<img src="https://i.imgur.com/Vc8mFJS.png" width="100" height="100" alt="Screen 3">
<p>Guarantee</p>
</div>
<div class="logolist">
<img src="https://i.imgur.com/lc7YSqS.png" width="100" height="100" alt="Screen 3">
<p>Trust</p>
</div>
<div class="logolist">
<img src="https://i.imgur.com/MupBAPH.png" width="100" height="100" alt="Screen 3">
<p>Satisfaction</p>
</div>
<div class="logolist">
<img src="https://i.imgur.com/vGZi5RJ.png" width="100" height="100" alt="Screen 3">
<p>Refund</p>
</div>
</div>
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 a trouble making website. I can't make 3 photos align in one line.
<div>
<img src="Images/mcdonalds.jpg" width="300px" height="180px">
</div>
<div>
<img src="Images/cilipica.jpg" width="300px" height="180px">
</div>
<div>
<img src="Images/mythay.jpg" width="300px" height="180px" >
</div>
float: left is used
div is inherently display:block
you need to use something like a span which has display:inline-block
https://jsfiddle.net/7daffjh8/2/
See this fiddle
Change the display property of div to inline-block instead of block
Add the below given to your CSS
div{
display:inline-block;
}
Try this
add float:left on div
div {
float:left
}
<div>
<img src="Images/mcdonalds.jpg" width="300px" height="180px">
</div>
<div>
<img src="Images/cilipica.jpg" width="300px" height="180px">
</div>
<div>
<img src="Images/mythay.jpg" width="300px" height="180px" >
</div>
I hope this would help.
See the Example on Fiddle
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title></title>
<style>
div.container {
display:inline-block;
}
</style>
</head>
<body>
<div class="container">
<img src="http://placehold.it/300x180" height="300" width="180" />
</div>
<div class="container">
<img src="http://placehold.it/300x180"/ height="300" width="180" />
</div>
<div class="container">
<img src="http://placehold.it/300x180" height="300" width="180" />
</div>
</div>
</body>
</html>
Try this:
You had used multiple . After closing of next tag content always displayed in next line.
<div>
<img src="Images/mcdonalds.jpg" width="300px" height="180px">
<img src="Images/cilipica.jpg" width="300px" height="180px">
<img src="Images/mythay.jpg" width="300px" height="180px" >
</div>
you have to make the divs display inline. under CSS
div{
display:inline;
}
or
<div style="display:inline;">
<img src="Images/mcdonalds.jpg" width="300px" height="180px">
</div>
<div style="display:inline;">
<img src="Images/cilipica.jpg" width="300px" height="180px">
</div>
<div style="display:inline;">
<img src="Images/mythay.jpg" width="300px" height="180px" >
</div>
div.minihalf-width{
width:30%;
float:left
}
div.minihalf-width img{
width: 100%;
}
<section>
<div class="minihalf-width">
<img src="latest-work/work-1.png" alt="">
</div>
<div class="minihalf-width">
<img src="latest-work/work-2.jpg" alt="">
</div>
<div class="minihalf-width">
<img src="latest-work/work-3.jpg" alt="">
</div>
</section>
#container
{
text-align: center;
background-color: green;
}
.box
{
display: inline;
margin-left: 50px;
}
<div id="container">
<div class="box"><img src="http://developer-static.se-mc.com/wp-content/blogs.dir/1/files/2012/12/ScaleImages.jpg" width="100" height="100" /></div>
<div class="box"><img src="http://developer-static.se-mc.com/wp-content/blogs.dir/1/files/2012/12/ScaleImages.jpg" width="100" height="100" /></div>
<div class="box"><img src="http://developer-static.se-mc.com/wp-content/blogs.dir/1/files/2012/12/ScaleImages.jpg" width="100" height="100" /></div>
<div class="box"><img src="http://developer-static.se-mc.com/wp-content/blogs.dir/1/files/2012/12/ScaleImages.jpg" width="100" height="100" /></div>
<div class="box"><img src="http://developer-static.se-mc.com/wp-content/blogs.dir/1/files/2012/12/ScaleImages.jpg" width="100" height="100" /></div>
<div class="box"><img src="http://developer-static.se-mc.com/wp-content/blogs.dir/1/files/2012/12/ScaleImages.jpg" width="100" height="100" /></div>
<div class="box"><img src="http://developer-static.se-mc.com/wp-content/blogs.dir/1/files/2012/12/ScaleImages.jpg" width="100" height="100" /></div>
</div>
http://jsfiddle.net/VfKa4/
this is I have so far. I want to achieve this:
according to the number of blue box, only 3 may go to a line. The other goes to new line, but have to be centered. But I dont know how to do the margin, because no left-right margin is needed, still there has to be distances from each other
Add width:400px to your container (this will snugly fit three 100px images with 50px margins between them), and add the following rule:
.box:nth-child(3n+1) {margin-left:0}
Note also that to use display:inline-block, you cannot have any spaces between the elements, as this will mess up your layout.
Updated Fiddle
I think display:inline-block is what you are after.
JSFiddle Demo
CSS
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#container
{
text-align: center;
background-color: green;
font-size:0;
margin-bottom:10px;
}
.box
{
display: inline-block;
width:33%;
margin-bottom:10px;
}
.box{
margin: 0 auto;
}
This aligns items to the center. You can also set a margin value by changing the 0.
eg: margin: 20px auto;
<div id="container">
<center>
<div class="box"><img src="http://developer-static.se-mc.com/wp-content/blogs.dir/1/files/2012/12/ScaleImages.jpg" width="100" height="100" /></div>
<div class="box"><img src="http://developer-static.se-mc.com/wp-content/blogs.dir/1/files/2012/12/ScaleImages.jpg" width="100" height="100" /></div>
<div class="box"><img src="http://developer-static.se-mc.com/wp-content/blogs.dir/1/files/2012/12/ScaleImages.jpg" width="100" height="100" /></div>
<div class="box"><img src="http://developer-static.se-mc.com/wp-content/blogs.dir/1/files/2012/12/ScaleImages.jpg" width="100" height="100" /></div>
<div class="box"><img src="http://developer-static.se-mc.com/wp-content/blogs.dir/1/files/2012/12/ScaleImages.jpg" width="100" height="100" /></div>
<div class="box"><img src="http://developer-static.se-mc.com/wp-content/blogs.dir/1/files/2012/12/ScaleImages.jpg" width="100" height="100" /></div>
<div class="box"><img src="http://developer-static.se-mc.com/wp-content/blogs.dir/1/files/2012/12/ScaleImages.jpg" width="100" height="100" /></div>
</center>
</div>
I want to align my three images horizontally instead of vertically what is the easiest way to achieve this? example
<div id="christmas_promotion_boxes">
<div id="christmas_promo_1">
<img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100">
</div>
<div id="christmas_promo_2">
<img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100">
</div>
<div id="christmas_promo_3">
<img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100">
</div>
</div>
#christmas_promotion_boxes {width:1000px; margin:0 auto 0 auto; text-align:center;}
Display the divs as inline-block like so :
#christmas_promotion_boxes div {
display: inline-block;
}
Fiddle
You need the div's containing the images to be floated.
Add this section of code into your css:
#christmas_promotion_boxes > *{
float:left;
}
http://jsfiddle.net/tDfCR/5/
When I have inline elements I always put them in a ul and display the li's inline. This way you don't have to worry about floating anything and it is much more scalable.
<ul>
<li id="christmas_promo_1"><img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100"></li>
<li id="christmas_promo_2"><img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100"></li>
<li id="christmas_promo_3><img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100"></li>
</ul>
ul{
width:5em
}
li{
display:inline;
list-style-type:none;
}
Slightly different from #zazvorniki accepted answer:
<div class="christmas_promotion_boxes">
<img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100"/>
<img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100"/>
<img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100"/>
</div>
.christmas_promotion_boxes {
width: 1000px;
margin: 0 auto 0 auto;
display: inline-block;
}
http://jsfiddle.net/tDfCR/114/
Make sure the width is larger the sum all of width of all the images.
add this
#christmas_promotion_boxes div{
float: left;
}