Develop Reference

Why can't I get these images with titles to flow horizontally center?

Previously I posed a question here1, and it was answered appropriately to solve my first issue but not my second issue - the first being proper code arrangement and the second being the question I'm talking about. I removed the CSS code that was originally applied, which you can view on original question, and applied the new CSS code as follows:
.img {
margin: 10px;
}
.grid {
display: flex;
flex-wrap: wrap;
/* max-width: 800px; */
}
.grid a {
display: flex;
align-items: center;
}
I removed the max-width: 800px; and received the following result.
Adding the max-width: 800px; showed the same results in image. Tried various combinations of CSS with no positive results. The code snippet as follows:
<div className={styles.grid}>
<div className={styles.imgc}>
<a href="..\pages\satweather.js">
<img
className={styles.img}
src="weatherbutton.jpg"
width="100"
height="50"
onclick="openModal();currentSlide(1)">
</img>
<div>→ SatWeather</div>
</a>
</div>
/* code continues in repetition for 4 more images
before ending with */
</div>
Does anyone have any suggestions on what I might try or a solution to this problem? To get these images aligned center and horizontally to the page. Help is appreciated.
Here is desired result, but without space between photo and link to page
Please Note: This is JS, not HTML.

Here is html version of your code.
Use display:flex to image container and then, Make one separate element for image box just like here which is image-box set it's anchor tag to display:flex and align-items:center.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
background-color: #050505;
}
.image-container {
position: relative;
display: flex;
flex-direction: row;
gap: 15px;
flex-wrap: wrap;
}
.image-class {
height: 50px;
width: 100%;
object-fit: cover;
}
.image-box a {
display: flex;
flex-direction:column;
}
<div class="container">
<div class="image-container">
<div class="image-box">
<a href="javasctipt:void(0);">
<img src="https://source.unsplash.com/random" alt="image" class="image-class">
<h1>image titel</h1>
</a>
</div>
<div class="image-box">
<a href="javasctipt:void(0);">
<img src="https://source.unsplash.com/random" alt="image" class="image-class">
<h1>image titel</h1>
</a>
</div>
<div class="image-box">
<a href="javasctipt:void(0);">
<img src="https://source.unsplash.com/random" alt="image" class="image-class">
<h1>image titel</h1>
</a>
</div>
<div class="image-box">
<a href="javasctipt:void(0);">
<img src="https://source.unsplash.com/random" alt="image" class="image-class">
<h1>image titel</h1>
</a>
</div>
</div>
</div>

The divs won't sit side by side

I am having some difficulty getting my div elements to sit side by side with each other. There is sufficient width on the page for one div to sit next to the other, but it just seems to sit beneath the other div.
HTML parent component:
<div class="Container">
<div class="header">
<div>
<h1>Information & Advice</h1>
</div>
<div>
<h2>From The Daylight Experts</h2>
</div>
</div>
<div class="wrapper">
<app-carousel></app-carousel>
<app-instagram></app-instagram>
<app-guides></app-guides>
</div>
</div>
CSS parent:
.Container {
padding: 0;
width:100%;
height: 100%;
margin: 0;
position: absolute;
}
.header {
display: flex;
justify-content: center;
}
.wrapper {
position: absolute;
float: left;
}
app-carousel component.html:
<div class="carouselContainer">
<mdb-carousel class="carousel slide carousel-fade" [animation]="'fade'">
<mdb-carousel-item>
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg" alt="First slide">
</mdb-carousel-item>
<mdb-carousel-item>
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(6).jpg" alt="Second slide">
</mdb-carousel-item>
<mdb-carousel-item>
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(9).jpg" alt="Third slide">
</mdb-carousel-item>
</mdb-carousel>
</div>
app-carousel component.css:
.carouselContainer {
width: 59.5%;
margin-left: 15px;
}
app-instagram component .html:
<div class="instagramContainer">
<div id="curator-feed-default-layout">
Powered by Curator.io
</div>
</div>
app-instagram component .css:
.instagramContainer {
width: 30%;
height: 100%;
float: left;
}
This currently makes the instagram <div> sit under the carousel <div>. I want them side by side, which I thought could be achieved by just floating the child elements of the container.

You can make it clean using flex that will give your clear visibility, this may help you to get going with your changes.
.Container {
padding: 0;
width: 100%;
height: 100%;
margin: 0;
display: flex;
/* you need this to move content side by side */
flex-direction: row;
/* provide the width for parent */
width: 800px;
}
.header {
/* inherit parent width */
width: 400px;
border: 1px solid red;
}
.wrapper {
width: 400px;
/* inherit parent width */
border: 1px solid yellow;
}
<div class="Container">
<div class="header">
<div>
<h1>Information & Advice</h1>
</div>
<div>
<h2>From The Daylight Experts</h2>
</div>
</div>
<div class="wrapper">Your wrapper content here...
<app-carousel></app-carousel>
<app-instagram></app-instagram>
<app-guides></app-guides>
</div>
</div>

How to display multiples images equally in a div

I am trying to create a photo gallery app and came across some obstacles. I want to have each image take equal portion of the div, for example if there are two images, each image takes up 50% of the div, and if there are three images, each images takes up 33.33% of the div, etc. Further, is there a way to format those images to be in square dimensions through css?
Also, I have the photos-gallery div that contains h2 and photos-gallery-content div. Currently, I am hardcoding the height for the photos-gallery-content div to fit inside the parent div, but is there a way to make that div take the remainder of the height of its parent div?
Eventually I want the pictures to render dynamically using React so any recommendations/advice on that would help a lot too.
Here is my code:
#photos {
width: 634px;
height: 339px;
}
.photos-gallery {
width: 634px;
height: 275.03px;
}
.photos-gallery-header {
font-size: 24px;
font-weight: bold;
line-height: 32px;
color: #333333;
border-bottom: 1px solid #E1E1E1;
padding-bottom: 16px;
margin: 0 0 16px 0;
display: flex;
justify-content: space-between;
}
.photos-gallery-content {
height: 200px;
}
.photos-gallery-layout {
height: 200px;
overflow: hidden;
float: left;
display: flex;
margin: 0;
padding: 0;
}
.photos-gallery-layout li {
height: auto;
float: left;
list-style: none;
display: flex;
}
.photo {
display: inline-flex;
white-space: nowrap;
}
.photo img {
max-width: 100%;
max-height: auto;
display: inline-block;
vertical-align: middle;
}
<div id="photos-gallery" class="photos content-block">
<h2 class="photos-gallery-header"> 2 Photos </h2>
<div class="photos-gallery-content">
<ul class="photos-gallery-layout">
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/8pTwPlXb.jpg" />
</div>
</li>
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/OPAR3PCb.jpg" />
</div>
</li>
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/A8eQsll.jpg" />
</div>
</li>
</ul>
</div>
<div>

I used your HTML and wrote a little CSS to demonstrate how to:
Have any amount of items fit at equal widths in one row using flexbox (display: flex on the parent and flex: 1 on the children)
Have <img> elements crop to the shape of the tallest element (in this case, a square) using object-fit: cover (note compatibility on CanIUse)
.photos-gallery-layout {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
.photos-gallery-li {
flex: 1;
}
.photo,
.photo img {
height: 100%;
}
.photo img {
width: 100%;
object-fit: cover;
}
<ul class="photos-gallery-layout">
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/8pTwPlXb.jpg" />
</div>
</li>
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/OPAR3PCb.jpg" />
</div>
</li>
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/A8eQsll.jpg" />
</div>
</li>
</ul>

putting 2 images side by side with no space and centered

I am trying to get 2 images that are side by side centered on the page and I am completely lost. I've included align="center" in div and it does nothing and I have tried positioning absolute and it kicks that image to center but other is still margined left. I have included my code below for you to see. I'm sure it's fairly easy and my brain is just stuck clocking today. Any help would be much appreciated. Thanks
<div>
<div class="item">
<contentful-image url="#Model.EventImages[0].File.Url" #*width="300" height="300" *# style="float:left; width: 30%; margin-bottom: 0.5em; position: absolute " />
</div>
<div class="item">
<contentful-image url="#Model.EventImages[1].File.Url" #*width="300" height="300"*# style="float:left; width: 30%; margin-bottom: 0.5em";/>
</div>
</div>

You can try these two examples and see if any solves your problem, though presented with the img element.
If you want the body element to be the parent, you can do something like this:
* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100vw;height:100vh}
body {
display: flex;
justify-content: center;
align-items: center;
}
/* Add this if you want to place them horizontally. */
/*
div {
display: flex;
}
*/
img {
display: block;
}
<div>
<div class="item">
<img src="http://via.placeholder.com/300x300" alt="img1">
</div>
<div class="item">
<img src="http://via.placeholder.com/300x300" alt="img2">
</div>
</div>
And if you want the div to be the parent, like this:
* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100vw;height:100vh}
.parent {
display: flex;
justify-content: center;
align-items: center;
/* flex-direction: column; */ /* Add this if you want to place them vertically. */
width: 100vw;
height: 100vh;
}
img {
display: block;
}
<div class="parent">
<div class="item">
<img src="http://via.placeholder.com/300x300" alt="img1">
</div>
<div class="item">
<img src="http://via.placeholder.com/300x300" alt="img2">
</div>
</div>
Where the .parent takes full width & height of the viewport.

Use CSS class instead of inline CSS your CSS goes as follows:
CSS for image tag:
.myImg {
display: inline-block;
margin-left: auto;
margin-right: auto;
height: 30px;
}
CSS for the div you have to contain the image:
.image-container{
display: inline-block;
}
Now the CSS to centre your image:
#image{
text-align:center;
}
Finally how to use it in html:
<div id="images">
<div class="image-container">
<img class="myImg" alt="No image" src="your_image_url"/>
</div>
<div class="image-container">
<img class="myImg" alt="No image" src="your_image_url"/>
</div>
</div>​
<html>
<head>
<style>
.myImg {
display: inline-block;
margin-left: auto;
margin-right: auto;
height: 30px;
}
.image-container{
display: inline-block
}
#images{
text-align:center;
}
</style>
</head>
<body>
<div id="images">
<div class="image-container">
<img class="myImg" alt="No image" src="http://shlesha.co.in/images/demo/logo/logo-blue-white-trans-249x80.png"/>
</div>
<div class="image-container">
<img class="myImg" alt="No image" src="http://shlesha.co.in/images/demo/logo/logo-blue-white-trans-249x80.png"/>
</div>
</div>​
</body>
</html>
Here "display: inline-block" helps you to display two or more images to be displayed side by side and margin as auto helps you to automatically adjust your margin irrespective of the screen size
I hope this solves your need for any further query comment below.

try using flex-box, it's pretty straight forward. Set display:flex for the parent, then you can align the children with align-items: center.
html like:
<div class="parent">
<div class="item">
<contentful-image url="" />
</div>
<div class="item">
<contentful-image url="" />
</div>
</div>
and css like:
.parent {
display: flex;
align-items: center;
}

Try creating parent and child div like this:
.parent-container {
display: flex;
-webkit-flex-wrap: nowrap;
}
.child-container{
padding: 10px;
}
<div class="parent-container">
<div class="child-container">
<img alt="First Image" src=""/>
</div>
<div class="child-container">
<img alt="Second Image" src="" />
</div>
</div>

Expand Image to container width when moving to next line

Is there a way to make the width of the image, when it transitions into another line to take up as much room as possible?
For example, if the images are displayed next to each other, as soon as one of them drops to the next line, that image on the next line expands to container's width.
I believe I saw this being achieved with flexbox but I can't remember how to do it and if there's alternate ways to do it, I'm all ears.
fiddle:https://jsfiddle.net/jzhang172/6kpyhpbh/
body,html{
padding:0;
margin:0;
}
*{
box-sizing:border-box;
}
.grid img{
float:left;
height:100px;
}
.grid{
display:flex; flex-grow:2;
flex-wrap:wrap;
}
<div class="grid">
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
</div>

Add flex:1 to the image.
Revised Fiddle
body,
html {
padding: 0;
margin: 0;
}
* {
box-sizing: border-box;
}
.grid {
display: flex;
/* flex-grow: 2; <-- can be removed; not doing anything; applies only to flex items */
flex-wrap: wrap;
}
.grid img {
/* float: left; <-- can be removed; floats are ignored in a flex container */
height: 100px;
flex: 1; /* NEW; tells flex items to distribute available space evenly;
a single flex item on the line will consume 100% of the space;
two flex items will take 50% each; etc. */
}
<div class="grid">
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
</div>

Add this lines to .grid img
flex-basis: 25%;
display: flex;
flex-grow: 1;
height: 100%;
width: 100%;
flex-basis: 25% will let only 4 images / line
flex-grow: 1 will try to grow the images on the line to the div boundaries
width: 100%; height: 100%; will keep the image aspect ratio
JS Fiddle