I've created an image gallery but I am unsure about how to center the images in the middle of the page horizontally and vertically.
<div class="gallery">
<a target="_blank" href="Icon_pyro.jpg">
<img src="Icon_pyro.jpg" alt="Pyro" width="256" height="256">
</a>
<div class="desc">Pyro</div>
</div>
With my CSS classes being
div.gallery {
display: block;
margin: 0 auto;
text-align: center;
}
div.gallery img {
margin: 5px;
}
It shows up stacked on top, I am stumped on how to make them side by side
Current webpage
You can use display:flex property to fix your problem.
I will give you some Idea........................
horizontally center
if you use display:flex; all div elements are show as row. Then if you use justify-content:center; you row element will be center horizontally.
.html
<div class="imageContainer">
<div class="img">
<img src="https://via.placeholder.com/256x256">
</div>
<div class="img">
<img src="https://via.placeholder.com/256x256">
</div>
<div class="img">
<img src="https://via.placeholder.com/256x256">
</div>
</div>
.css
.imageContainer{
display:flex;
justify-content:center;
}
.img{
margin:5px;
}
jsFiddle example
Vertically center
You have to only add align-items: center; and min-height: 100vh;
.imageContainer{
display: flex;
align-items: center;
min-height: 100vh;
}
jsFiddle Example
horizontally and vertically Center.
just add (here has both above css propertise. have a look and get the idea)
.imageContainer{
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
}
jsFiddle Example
As well as check following example it will show you how to center columns items vertically and horizontally (just added flex-direction:column;)
.imageContainer{
display:flex;
align-items:center;
min-height:100vh;
flex-direction:column;
justify-content:center;
}
jsFiddle Example
Here is the tutorial if you want to follow and get some idea about flex
Can you please check the below code? Hope it will work for you.
You have to add one parent element for all the gallery elements and give flex utility property to that parent. You need to set the height of gallery parent element as per requirements (currently, we have set viewport height for the below demo).
Please refer to this link: https://jsfiddle.net/yudizsolutions/b2fq8dhr/
It sounds like you will want to wrap the images using flex to get them side by side.
In that case, I would create a gallery-wrapper div that wraps around all of your gallery divs. You can style the gallery-wrapper to get flex, which will make it's children side-by-side by default. Also, add justify-content: center, to center things horizontally. Check out this jsFiddle / my updated answer, and consider learning more about Flexbox styling - it's the best.
.gallery-wrapper {
display: flex;
justify-content: center;
}
<body>
<div class="gallery-wrapper">
<div class="gallery">
<a target="_blank" href="Icon_pyro.jpg">
<img src="Icon_pyro.jpg" alt="Pyro" width="256" height="256">
</a>
<div class="desc">Pyro</div>
</div>
<div class="gallery">
<a target="_blank" href="Icon_scout.jpg">
<img src="Icon_scout.jpg" alt="Scout" width="256" height="256">
</a>
<div class="desc">Scout</div>
</div>
<div class="gallery">
<a target="_blank" href="Icon_spy.jpg">
<img src="Icon_spy.jpg" alt="Spy" width="256" height="256">
</a>
<div class="desc">Spy</div>
</div>
<div class="gallery">
<a target="_blank" href="Icon_soldier.jpg">
<img src="Icon_soldier.jpg" alt="Soldier" width="256" height="256">
</a>
<div class="desc">Soldier</div>
</div>
</div>
</body>
Related
I've been doing some stuff with HTML and I need to have a few columns. I know how to make them and the basics of how they work. However, there is a certain problem that I have. I need to have 3 columns that have an image on top, then text on bottom. However, the text on bottom can't flow into the next column if the browser is resized - it just needs to go up or down. What I have so far:
body {
background-color: white;
font-family: times, serif;
color: black;
}
div {
display: flex;
margin: 50px;
flex-wrap: wrap;
}
<div>
<div class="first">
<img src="Images/australia_flag.jpg" alt="Australian Flag" title="Australian Flag" height="200" width="300"> text as well </div>
<div class="second">
<img src="Images/brazil_flag.jpg" alt="Brazilian Flag" title="Brazilian Flag"> even more text </div>
<div class="third">
<img src="Images/china_flag.jpg" alt="Chinese Flag" title="Chinese Flag" height="200" width="300"> text again
</div>
</div>
not entirely sure if you mean columns or rows? Based on your code, it looks like rows. If that's the case, I'm not sure what you mean by "flow into the next column"? You might check out the relative and absolute values for CSS position.
If, in fact, you do actually mean columns, I'd strongly advise using Bootstrap's Grid System. This is great for creating responsive columns.
Please take a look at this simple 3 column layout with a full width content area on top and bottom here: https://jsfiddle.net/7drfva0o/2/
.top, .bottom {
width:98%;
padding:1%;
background-color: red;
clear:both;
}
.cols {
width:31%;
padding:1%;
float:left;
background-color:blue;
border: 1px solid #FFF;
}
Is that what you're looking for?
First, you'll need to improve your markup: having images and texts as DOM node to be "flexed"
HTML markup improved
<div class="wrapper">
<div class="column">
<img src="..." />
<p>text</p>
</div>
<div class="column">
<img src="..." />
<p>text</p>
</div>
<div class="column">
<img src="..." />
<p>text</p>
</div>
</div>
Then, each of your div is going to have display: flex + flex-direction: column to allow the image going on top and the text going below. You will be able to adjust margin or whatever. At the minimum, I'd go like this:
CSS improved
.wrapper {
display: flex;
}
.column {
margin: 5px;
display: flex;
flex-direction: column;
}
Wrapped altogether, here is a snippet of what I think you're trying to achieve
Snippet
.wrapper {
display: flex;
}
.column {
margin: 5px;
display: flex;
flex-direction: column;
}
<div class="wrapper">
<div class="column">
<img src="http://fakeimg.pl/300x200" />
<p>text as well</p>
</div>
<div class="column">
<img src="http://fakeimg.pl/300x200" />
<p>text as well</p>
</div>
<div class="column">
<img src="http://fakeimg.pl/300x200" />
<p>text as well</p>
</div>
</div>
Then, feel free to play with flexbox properties to align, wrap, adjust alignments, etc. Great documentation on CSS-Tricks : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I'm attempting to create an image gallery and want it to appear as a horizontal strip at the bottom of the page that can be scrolled along from left to right to view all of the images. However, something about my code is preventing me from using overflow-x:scroll on the bottom-gallery div or the thumnbail-wrap div. Instead of the images continuing left to right, they automatically start stacking on eachother if the viewport is small enough. Even if I explicitly add overflow-x:scroll to #bottom-gallery and .thumbnail-wrap, they will get set to overflow-y instead, making them scrollable vertically which I don't want.
I have included relevant markup and css below. I suspected that flexbox styling may have contributed to my problem but I toyed with removing all flexbox references in the css and the problem persisted.
Are there known things that prevent layouts from scrolling horizontally?
Markup:
<div class="col-xs-12 hidden-md hidden-lg" id="bottom-gallery">
<div class="thumbnail-wrap">
<img src="assets/images/beardo-thumb.jpg" alt="thumbnail">
<img src="assets/images/grecian-thumb.jpg" alt="thumbnail">
<img src="assets/images/kreg-portrait-thumb.jpg" alt="thumbnail">
<img src="assets/images/pigblood-thumb.jpg" alt="thumbnail">
<img src="assets/images/zombie-thumb.jpg" alt="thumbnail">
</div>
</div>
CSS:
#bottom-gallery {
height:15vh;
padding:15px 0;
div.thumbnail-wrap {
justify-content:flex-start;
a {
width:75px;
height:75px;
margin-bottom:15px;
margin-right:10px;
}
}
}
div.thumbnail-wrap {
display:flex;
flex-flow:row wrap;
img {
width:100%;
height:100%;
}
}
Here's the minimal needed to get you started:
.thumbnail-wrap {
overflow-x: scroll;
display: flex;
}
.thumbnail-wrap .thumb-link {
display: inline-block;
flex: 1 0 auto;
}
<div class="thumbnail-wrap">
<a href='' class='thumb-link'><img src="//placehold.it/400x100/0bf" alt='th'></a>
<a href='' class='thumb-link'><img src="//placehold.it/400x100/fb0" alt='th'></a>
<a href='' class='thumb-link'><img src="//placehold.it/400x100/0fb" alt='th'></a>
<a href='' class='thumb-link'><img src="//placehold.it/400x100/f0b" alt='th'></a>
</div>
I'm trying to recreate this layout with flexbox only:
I'm trying to keep it as simple as possible with minimal markup, however I'm having a hard time vertically centering everything on one line.
What am I doing wrong?
This is the code:
body {
margin: 0;
}
#p {
background: #26272b;
color: white;
display: flex;
align-items: center;
padding: 1rem;
justify-content: space-between;
}
img {
width: 1rem;
}
.pp {
width: 2rem
}
<div id="p">
<div id="pl">
<img src="http://mortenhjort.dk/synchub/imgs/beamed-note.svg" alt="note">
<h4>A Head Full Of Dreams <span>- Coldplay</span></h4>
</div>
<div id="pc">
<a href="#">
<img src="http://mortenhjort.dk/synchub/imgs/previous.svg" alt="Click to go back">
</a>
<a href="#">
<img class="pp" src="http://mortenhjort.dk/synchub/imgs/play.svg" alt="Click to play">
</a>
<!-- <img class="pp" src="http://mortenhjort.dk/synchub/imgs/pause.svg" alt="Click to pause"> -->
<a href="#">
<img src="http://mortenhjort.dk/synchub/imgs/next.svg" alt="Click to skip">
</a>
</div>
<div id="pr"></div>
<time>00:14 / 00:30</time>
<div></div>
This is the JSFiddle: https://jsfiddle.net/h1k8v16g/
Your primary flex container is working to keep flex items vertically centered.
However, the content of the flex items is still in a block formatting context.
Therefore, make the flex items into flex containers with centering:
div { display: flex; align-items: center; }
revised fiddle
Learn more about the scope of a flex formatting context here: https://stackoverflow.com/a/37844240/3597276
I've spent more time than I care to admit trying to get a row of images to be clickable links in a row that aligns the images in the middle of the row that doesn't break Bootstrap responsiveness. The links work fine, but the alignment is off, due to variations in the sizes of the images (though they're all compact-height landscape). I can get the images to align vertically within div.row, but it breaks responsiveness and images don't resize properly.
Here's a JSFiddle of what I've tried
Here's what I'm trying to do:
row
--------------------------------------------------------
| |
image1 | image2 | image3
| |
--------------------------------------------------------
Here's the best I can come up with:
row
--------------------------------------------------------
image1 | image2 | image3
| image2 | image3
| image2 |
--------------------------------------------------------
This answer is exactly what I'm trying to achieve, however the images don't vertically center for me when I use the CSS classes from it.
I've got images that are all compact landscape images on a Bootstrap project. Trying to align the images vertically within the row
What I've tried:
Here's what I started with:
<div class="row vertical-align">
<div class="col-sm-4">
<img src="../img/my-image-1.png" class="img-responsive">
</div>
<div class="col-sm-4">
<img src="../img/my-image-1.png" class="img-responsive">
</div>
<div class="col-sm-4">
<img src="../img/my-image-1.png" class="img-responsive">
</div>
</div>
I can get everything to appear in a row as a clickable link, but due to slight variations in sizes of the images, the images do not align in the vertical center of row. I added this vertical-align on a normal screen, but it breaks Bootstrap's responsiveness when the window resizes.
.vertical-align {
display: flex;
align-items: center;
}
For my second attempt, I removed the vertical align class from the div.row and removed Bootstrap's img-responsive class from the img tag, as follows:
<div class="row">
<div class="col-sm-4">
<div><img src="../img/my-image-1.png"></div>
</div>
<div class="col-sm-4">
<div><img src="../img/my-image-2.png"></div>
</div>
<div class="col-sm-4">
<div><img src="../img/my-image-3.png"></div>
</div>
</div>
In my CSS file, I added these classes:
.jumbotron .row > a {
display: block;
}
.jumbotron > .row div a img {
max-height: 80px;
max-width: 100%;
vertical-align: middle;
}
The CSS classes above don't break Bootstrap, but they align the images along the tops of them, not in the vertical center of the div.row.
I've tried a bunch of other stuff, but I can't get it to work. This post looked filled with promise, but I couldn't get it to work:
How to vertically align an image inside div
I'd like to get this figured out with CSS and HTML, no jQuery. Any suggestions re: what I'm ****ing up would be greatly appreciated.
Bootstrap's columns are floating by default with css float property. With float we can't middle align columns. However with display: inline-block we can. All we need is to remove float from styles of columns and change them to inline-block with vertical-align: middle and you will get what you want. But don't forget to remove extra space that comes with inline-block.
Here is the trick.
.vertical-align {
letter-spacing: -4px;
font-size: 0;
}
.vertical-align .col-xs-4 {
vertical-align: middle;
display: inline-block;
letter-spacing: 0;
font-size: 14px;
float: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="jumbotron">
<div class="row vertical-align">
<div class="col-xs-4">
<img src="http://www.americancivilwarstory.com/images/Coca-Cola_logo.svg.png" class="img-responsive">
</div>
<div class="col-xs-4">
<img src="http://cdn0.sbnation.com/entry_photo_images/2668470/coca-cola_large_verge_medium_landscape.png" class="img-responsive">
</div>
<div class="col-xs-4">
<img src="http://ichef.bbci.co.uk/images/ic/256x256/p03r5406.jpg" class="img-responsive">
</div>
</div>
</div>
</div>
Note: Setting font-size: 0; letter-spacing: -4px on parent and applying parent's font-size: 14px; letter-spacing: 0 back on child elements will remove white space that comes with inline-block.
please try this and lemme know if this is what you wanted
<style>
img {
height: auto;
width: 100%;
}
.vertical {
height: 100vh;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.abcd {
min-width: 5em;
flex: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="vertical">
<div class="abcd">
<img src="https://images.unsplash.com/photo-1460378150801-e2c95cb65a50?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=1b5934b990c027763ff67c4115b6f32c">
</div>
<div class="abcd">
<img src="https://images.unsplash.com/photo-1460378150801-e2c95cb65a50?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=1b5934b990c027763ff67c4115b6f32c">
</div>
<div class="abcd">
<img src="https://images.unsplash.com/photo-1460378150801-e2c95cb65a50?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=1b5934b990c027763ff67c4115b6f32c">
</div>
</div>
</div>
</body>
I have created a little workaround. The real problem is that the <a> element is not cooperating. The link element won't obtain the width/height of his child, that is why the solution provided does not work. A workaround to this is to use the background-image property. Giving a wrapper a solid height and width and apply the image as background using background-size: contain. See the fiddle provided below.
https://jsfiddle.net/f9ogw26n/21/
.wrapper {
height: 200px;
width: 100%;
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-xs-4">
<a href="#">
<div class="wrapper" style="background-image:url('http://www.americancivilwarstory.com/images/Coca-Cola_logo.svg.png');">
</div>
</a>
</div>
<div class="col-xs-4">
<a href="#">
<div class="wrapper" style="background-image:url('http://ichef.bbci.co.uk/images/ic/256x256/p03r5406.jpg');">
</div>
</a>
</div>
<div class="col-xs-4">
<a href="#" title="">
<div class="wrapper" style="background-image:url('http:////cdn0.sbnation.com/entry_photo_images/2668470/coca-cola_large_verge_medium_landscape.png')">
</div>
</a>
</div>
</div>
</div>
I'm trying to make a grid with some icons and their respective id.
For example, I have this code using bootstrap:
.flex {
display: flex;
align-items: center;
height: 200px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
rel="stylesheet" />
<div class="row flex">
<div class="col-md-2">
<img src="http://placehold.it/300x300" alt="" class="img-responsive">
<p class="text-center channel-number">2</p>
</div>
<div class="col-md-2">
<img src="http://placehold.it/300x100" alt="" class="img-responsive">
<p class="text-center channel-number">4</p>
</div>
<div class="col-md-2">
<img src="http://placehold.it/300x400" alt="" class="img-responsive">
<p class="text-center channel-number">11</p>
</div>
</div>
now the number will just stay right under the image, but I want the number to be horizontally align with the other numbers and centered below the image.
How can I do this?
Using flex or does bootstrap has a way of doing this?
Thanks!
Fiddle
Try this:
HTML (no changes)
CSS
.flex {
display: flex;
min-height: 200px;
}
.flex > .col-md-2 {
display: flex; /* create nested flex container */
flex-direction: column; /* stack children (image and number) vertically */
}
img { margin: auto;} /* forces numbers to bottom edge of container */
Revised Fiddle
Learn more about justify-content and auto margins here:
Methods for Aligning Flex Items