This question already has answers here:
How can I horizontally center an element?
(133 answers)
How do I center floated elements?
(12 answers)
Closed 1 year ago.
/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
float: left;
width: 33.33%;
padding: 5px;
}
/* Clear floats after image containers */
.row::after {
content: "";
clear: both;
display: table;
}
<div class="row">
<div class="column">
<img class="python" src="http://assets.stickpng.com/images/5848152fcef1014c0b5e4967.png" alt="Python png" height=100px width=100px>
</div>
<div class="column">
<img class="html" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png" alt="HTML png" height=100px width=100px>
</div>
<div class="column">
<img class="js" src="https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png" alt="Javascript png" height=100px width=100px>
</div>
<div class="column">
<img class="css" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/1200px-CSS3_logo_and_wordmark.svg.png" alt="CSS png" height=100px width=100px>
</div>
</div>
I've been trying to centre the CSS image for so long. I've been googling and googling but I can't seem to find the answer.
You need to check some articles about CSS Layouts
Here is example how to align items to the center with Flexbox:
.row {
display: flex;
flex-direction: column;
align-items: center;
}
As, the width and height of your images are fixed {100px,100px} you can do one simple change and image will center relative to its parent container
img{ margin: 0 auto; }
.row {
display: flex;
justify-content: space-around;
align-items: center;
}
<div class="row">
<div class="column">
<img class="python" src="http://assets.stickpng.com/images/5848152fcef1014c0b5e4967.png" alt="Python png" height=100px width=100px>
</div>
<div class="column">
<img class="html" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png" alt="HTML png" height=100px width=100px>
</div>
<div class="column">
<img class="js" src="https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png" alt="Javascript png" height=100px width=100px>
</div>
<div class="column">
<img class="css" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/1200px-CSS3_logo_and_wordmark.svg.png" alt="CSS png" height=100px width=100px>
</div>
</div>
Related
I defined flexbox properties of container display: flex; flex-wrap: wrap; justify-content: center; but there are always 3 divs on the first row and 2 divs on the second. How to make it wrap divs when the browser resizes?
I tried almost everything (changed the width and height of parent container, changed width to min-width/max-width, set margin of parent container margin: 0 auto;).
<!-- HTML -->
<div class="parent">
<div class="headline">
<h2>Tea of the Month</h2>
<h4>What's Stepping at The Tea Cozy?</h4>
</div>
<div class="container">
<img src="..." class="image">
<p>Fall Berry Blitz Tea</p>
</div>
</div>
<div class="container">
<img src="..." class="image">
<p>Spiced Rum Tea</p>
</div>
</div>
<div class="container">
<img src="..." class="image">
<p>Seasonal Donuts</p>
</div>
</div>
<div class="container">
<img src="..." class="image">
<p>Myrtle Ave Tea</p>
</div>
</div>
<div class="container">
<img src="..." class="image">
<p>Bedford Bizarre Tea</p>
</div>
</div>
<!-- URL of images is correct -->
/* CSS */
.parent {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 1000px;
margin: 0 auto;
}
.headline {
display: block;
width: 100%;
}
.container {
margin: 0px 10px;
}
.image {
width: 300px;
height: 200px;
}
I expect the divs would wrap on next line. But there always are 3 divs on first and 2 divs on second line.
Your HTML contained some invalid closure tags, please validate your HTML you can check out: https://validator.w3.org/
Also removed the fixed width of 1000px, you want to have a fluid parent so it sizes acording to the device or browser width.
/* CSS */
.parent {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0 auto;
/* changed */
width: 100%;
}
.headline {
display: block;
width: 100%;
}
.container {
margin: 0px 10px;
}
.image {
width: 300px;
height: 200px;
}
<!-- HTML -->
<div class="parent">
<div class="headline">
<h2>Tea of the Month</h2>
<h4>What's Stepping at The Tea Cozy?</h4>
</div>
<div class="container">
<img src="https://placehold.it/300x300" class="image">
<p>Fall Berry Blitz Tea</p>
</div>
<!-- </div> REMOVED -->
<div class="container">
<img src="https://placehold.it/300x300" class="image">
<p>Spiced Rum Tea</p>
</div>
<!-- </div> REMOVED -->
<div class="container">
<img src="https://placehold.it/300x300" class="image">
<p>Seasonal Donuts</p>
</div>
<!-- </div> REMOVED -->
<div class="container">
<img src="https://placehold.it/300x300" class="image">
<p>Myrtle Ave Tea</p>
</div>
<!-- </div> REMOVED -->
<div class="container">
<img src="https://placehold.it/300x300" class="image">
<p>Bedford Bizarre Tea</p>
</div>
<div class="container">
<img src="https://placehold.it/300x300" class="image">
<p>Bedford Bizarre Tea</p>
</div>
<div class="container">
<img src="https://placehold.it/300x300" class="image">
<p>Bedford Bizarre Tea</p>
</div>
</div>
It happens because you set width:1000px on your .parent. This means that no matter the device size the parent will always be 1000px and there will always be 3 elements on the first row.
To solve this, set .parent {width: 100%; max-width: 1000px;}
cheers
How can I place 2 divs side by side, both which have images. I want the divs to remain side by side and the images auto size ,with screen size.When I reduce the size of the screen the images re-position themselves one below the other.
How will be the css for the below html?
<div class="container">
<div class="wrapper">
<div class="left">
<img src="img1.png" />
</div>
<div class="right">
<img src="img2.png" />
</div>
</div>
</div>
You can use css float to get contained elements to sit either side
.container {
width: 100%;
}
.left, .right {
width: 50%;
float: left;
}
<div class="container">
<div class="left"><img src='http://placehold.it/350x150'/></div>
<div class="right"><img src='http://placehold.it/350x150'/></div>
</div>
Edit: You can use Flex-Box
.container {
width: 100vw;
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
align-content: space-around;
}
.container > img {
align-self: auto;
margin: 4px;
}
<div class="container">
<img src='http://placehold.it/350x150'/>
<img src='http://placehold.it/350x150'/>
</div>
Try using bootstrap grid's. It can be something like this.
<div class="col-sm-12">
<div class="col-sm-6">
<img src="http://www.thebrandbite.com/wp-content/media/2015/07/apple-7.jpg" width="30%">
</div>
<div class="col-sm-6">
<img src="https://d3nevzfk7ii3be.cloudfront.net/igi/KRLMkuaBjm5mKDDP" width="30%">
</div>
</div>
Demo
I want to create a grid of images that first has a large featured image, then to it's right, has a grid of 4 (2 on each row).. and then underneath that, rows of 4 images at a time.
Loosely based on this design.
I think flexbox would probably be able to nail this one.
Say I have some markup like this
<div class="image-grid">
<div>
<img src="https://unsplash.it/1024/1024">
</div>
<div>
<img src="https://unsplash.it/1000/800">
</div>
<div>
<img src="https://unsplash.it/1100/1000">
</div>
<div>
<img src="https://unsplash.it/1120/1000">
</div>
<div>
<img src="https://unsplash.it/1130/1024">
</div>
<div>
<img src="https://unsplash.it/1101/1024">
</div>
<div>
<img src="https://unsplash.it/1020/1024">
</div>
<div>
<img src="https://unsplash.it/1021/1024">
</div>
<div>
<img src="https://unsplash.it/1002/1024">
</div>
<div>
<img src="https://unsplash.it/1003/1024">
</div>
<div>
<img src="https://unsplash.it/1004/1024">
</div>
<div>
<img src="https://unsplash.it/1005/1024">
</div>
</div>
with CSS
.image-grid {
display: flex;
flex-wrap: wrap;
}
img {
width: 100%;
}
.image-grid > div:first-child {
flex-basis: 50%;
}
.image-grid > div {
flex-basis: 25%;
}
this almost does what I need it to. Codepen here.
I need two things fixed though...
display 4 images to the right of the featured image, instead of the current 2.
stretch each image to fit it's space so it's a tight grid (no spacing around any image). I'm thinking of using the object-fit CSS property but I haven't got it working yet.
Thank you.
So I figured the easiest way would be to use a framework like Foundation to create the top row, and then use flexbox for the rest.
<div class="row">
<div class="medium-6 columns featured-image">
<img src="https://unsplash.it/1023/1024">
</div>
<div class="medium-6 columns featured-image-grid">
<div class="row">
<div class="medium-6 columns">
<img src="https://unsplash.it/1024/1024">
</div>
<div class="medium-6 columns">
<img src="https://unsplash.it/1022/1024">
</div>
</div>
<div class="row">
<div class="medium-6 columns">
<img src="https://unsplash.it/1021/1024">
</div>
<div class="medium-6 columns">
<img src="https://unsplash.it/1020/1024">
</div>
</div>
</div>
</div>
<div class="image-grid">
<img src="https://unsplash.it/1020/1024">
<img src="https://unsplash.it/1020/1025">
<img src="https://unsplash.it/1020/1022">
<img src="https://unsplash.it/1020/1021">
<img src="https://unsplash.it/1020/1029">
<img src="https://unsplash.it/1020/1028">
<img src="https://unsplash.it/1020/1027">
<img src="https://unsplash.it/1020/1023">
<img src="https://unsplash.it/1020/1024">
<img src="https://unsplash.it/1020/1025">
</div>
with the CSS
.row {
max-width: 100%;
margin: 0 !important;
}
.columns {
padding: 0;
}
.featured-image img {
height: 400px;
}
.featured-image-grid img {
height: 200px;
}
img {
object-fit: cover;
width: 100%;
}
.image-grid {
display: flex;
flex-wrap: wrap;
}
.image-grid > img {
flex-basis: 25%;
height: 200px;
width: auto;
}
Codepen here.
It needs some work to make it responsive, but it works for what I needed it to do.
.image-grid {
display: flex;
flex-wrap: wrap;
flex-direction: column;
width: 200px;
height: 100px;
}
.image-grid, .featured > img:first-child {
width: 100px;
height:100px;
}
.image-grid > img {
width: 50px;
height:50px;
}
<div class="image-grid featured">
<img src="https://unsplash.it/1024/1024">
<img src="https://unsplash.it/1000/800">
<img src="https://unsplash.it/1100/1000">
<img src="https://unsplash.it/1120/1000">
<img src="https://unsplash.it/1130/1024">
</div>
<div class="image-grid">
<img src="https://unsplash.it/1101/1024">
<img src="https://unsplash.it/1020/1024">
<img src="https://unsplash.it/1021/1024">
<img src="https://unsplash.it/1002/1024">
<img src="https://unsplash.it/1003/1024">
<img src="https://unsplash.it/1004/1024">
<img src="https://unsplash.it/1005/1024">
</div>
I have a gallery and the thumbnails are set to have a width of 100%. however some images do not fill the full height of this div.
How do I get it so that the images stretch over the full width and height of the div? (can't be changed to background images)
<div class="gallery-grid">
<div class="section group">
<div class="col span_1_of_6">
<img src="images/flowers.jpg" alt="" />
</div>
<div class="col span_1_of_6">
<img src="images/back.jpg" alt="" />
</div>
<div class="col span_1_of_6">
<img src="images/flowers.jpg" alt="" />
</div>
<div class="col span_1_of_6">
<img src="images/back.jpg" alt="" />
</div>
<div class="col span_1_of_6">
<img src="images/flowers.jpg" alt="" />
</div>
<div class="col span_1_of_6">
<img src="images/back.jpg" alt="" />
</div>
</div>
<!--style-->
.gallery-grid img{
width:100%;
}
It works for me. You must have some other css affecting it. See here: http://codepen.io/anon/pen/JGmRBW
.gallery-grid img{
width:100%;
}
Try this:
gallery-grid .section .col a{
display: block;
}
.gallery-grid .section .col a img {
width: 100%;
height: 100%;
}
You should consider that a is an inline element, so to put an image propely in it, you may need to set its display property correctly.
In action
a{
display: block;
width: 100px;
height: 100px;
}
img{
width: 100%;
height: 100%;
}
<p>The parent anchor has 100x100 dimensions:</p>
<p>The child image has 100x50 dimensions:</p>
<img src="https://placehold.it/100x50">
I'm using bootstrap 3, and I have problems when I want to align vertically two div, for example ( http://jsfiddle.net/Xelnag/335nhneq/ )
<div class="row">
<div class="col-sm-6 vbox">
<img src="img/1.png" class="icon-16"/>
<img src="img/2.png" class="icon-16"/>
</div>
<div class="col-sm-6">
<img src="img/3.png" class="icon-32"/>
<img src="img/4.png" class="icon-32"/>
<img src="img/5.png" class="icon-32"/>
</div>
</div>
CSS for "vbox" is just a vertical align:
.vbox { vertical-align: bottom; }
What i would like to see is left div aligned to bottom to match the right side.
I have seen answers in stackoverflow with the use of javascript but so far i have found none that works with just CSS with the bootstrap 3 responsive design.
I found the best way. You need to follow below code.
Check out this fiddle: http://jsfiddle.net/harnishdesign/335nhneq/2/
HTML
<div class="row">
<div class="table-container">
<div class="col-xs-6 vbox" style="border:1px solid #000">
<img src="img/1.png" class="icon-16"/>
<img src="img/2.png" class="icon-16"/>
</div>
<div class="col-xs-6 vbox" style="border:1px solid #F00">
<img src="img/3.png" class="icon-32"/>
<img src="img/4.png" class="icon-32"/>
<img src="img/5.png" class="icon-32"/>
</div>
</div>
</div>
CSS
.table-container .vbox {display: table-cell;
float: none;
vertical-align: bottom;
}
.table-container {
display: table;
table-layout: fixed;
width: 100%;
}
.icon-16
{
width: 16px;
height: 16px;
}
.icon-32
{
width: 32px;
height: 32px;
}