I am trying to horizontally align text with three vertically aligned images on each side of the text. However, when I apply "display:flex;" to the parent element of the three, it changes the alignment of the three divs from vertical to horizontal, changes the size of the images and causes white space inbetween the first div and the text, rather than pushing all the divs to the left of the screen.
.text {
font-family: 'font', cursive;
font-size: 18px;
text-align: left;
width: 35em;
}
.image > img {
width: 20%
}
.image {
display: flex;
flex-direction: column;
}
.flex {
display: flex;
}
<div class="flex">
<div class='image'>
<img src='image.jpg'>
<img src='image.jpg'>
<img src='image.jpg'>
</div>
<div class='text'>
<p>text
<br><br>text
<br><br>text
<br><br>text</p>
</div>
<div class='image'>
<img src='image.jpg'>
<img src='image.jpg'>
<img src='image.jpg'>
</div>
</div>
set your flex to your divs and remove the display and flex-direction from images
.text {
font-family: 'font', cursive;
font-size: 18px;
text-align: left;
flex:0 0 10%;
}
img {
width: 100%;
}
.image {
flex: 0 0 10%;
}
.flex {
display: flex;
}
<div class="flex">
<div class='image'>
<img src='https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'>
<img src='https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'>
<img src='https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'>
</div>
<div class='text'>
<p>text
<br><br>text
<br><br>text
<br><br>text</p>
</div>
<div class='image'>
<img src='https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'>
<img src='https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'>
<img src='https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'>
</div>
</div>
.text {
font-family: 'font', cursive;
font-size: 18px;
text-align: left;
flex: 1;
display: flex;
flex-flow: row nowrap;
justify-content: space-evenly;
align-items: center;
}
.image > img {
width: 20%;
display: block;
margin: 0 auto;
}
.image {
display: flex;
flex-flow: column nowrap;
}
.flex {
display: flex;
flex-flow: row nowrap;
justify-content: space-evenly;
align-items: center;
}
<div class="flex">
<div class='image'>
<img src='https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'>
<img src='https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'>
<img src='https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'>
</div>
<div class='text'>
<p>text
<br><br>text
<br><br>text
<br><br>text</p>
</div>
<div class='image'>
<img src='https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'>
<img src='https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'>
<img src='https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'>
</div>
</div>
Is that good?
Related
I recently got help on an issue I got and the final code is in the code section. Now I have just recognized that for smartphone view it does not look the way I want it. The current format is as follows:
Image | Text
Text | Image
Image | Text
Text | Image
For mobile view it should be:
Image
Text
Image
Text
Image
Text
Image
Text
The format for the second and fourth row have to be changed for the mobile view, in order to have the order image - text - image - text etc. For mobile view I have this section: #media only screen and (max-width: 768px){}. Also, does it make sense to have a separate class for each row? Can you please help?
.h1 {
display: flex;
align-items: center;
justify-content: center;
font-size: 50px;
padding-bottom: 50px;
}
.text {
font-size: 24px;
flex-direction: column;
}
.desc {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.image,
.text {
display: flex;
flex: 1 1 50%;
align-items: center;
justify-content: center;
padding: 10px 10px 20px 10px;
box-sizing: border-box;
flex-direction: column;
border: 2px solid;
}
.image img {
max-width: 80%;
}
.left {
justify-content: flex-start;
}
.right {
justify-content: flex-end;
}
<div class="h1">Headline</div>
<div class="desc">
<div class="image left">
<img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png">
</div>
<div class="text">
<b>Text</b>
<p>Text</p>
</div>
<div class="text">
<b>Text</b>
<p>Text</p>
</div>
<div class="image right">
<img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png">
</div>
<div class="image left">
<img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png">
</div>
<div class="text">
<b>Text</b>
<p>Text</p>
</div>
<div class="text">
<b>Text</b>
<p>Text</p>
</div>
<div class="image right">
<img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png">
</div>
</div>
You can achieve this by updating your CSS
#media only screen and (max-width: 768px){
.desc {
flex-direction: column;
}
.desc > div:first-of-type{
order: 1;
}
.desc > div:nth-last-of-type(2){
order: 2;
}
.desc > div:nth-last-of-type(3){
order: 4;
}
.desc > div:nth-last-of-type(4){
order: 3;
}
.desc > div:nth-last-of-type(5){
order: 5;
}
.desc > div:nth-last-of-type(6){
order: 6;
}
.desc > div:nth-last-of-type(7){
order: 8;
}
.desc > div:nth-last-of-type(8){
order: 7;
}
}
and don't forget to add a viewport in your HTML head if you want the media query to work on mobile devices :
<meta name="viewport" content="width=device-width, initial-scale=1">
Think mobile first and update your html code:
.desc {
display: grid;
}
#media (min-width:768px) {
.desc {
grid-template-columns:1fr 1fr; /* 2 columns only on big screen */
grid-auto-flow:dense; /* fill all the area */
}
.image:nth-child(4n + 3) {
grid-column:2; /* move the each second image to the second column */
}
}
.image,
.text {
display: flex;
align-items: center;
justify-content: center;
padding: 10px 10px 20px 10px;
box-sizing: border-box;
flex-direction: column;
border: 2px solid;
}
.image img {
max-width: 80%;
}
<div class="desc">
<div class="image">
<img src="https://picsum.photos/id/237/200/300">
</div>
<div class="text">
<b>Text</b>
<p>Text</p>
</div>
<div class="image ">
<img src="https://picsum.photos/id/237/200/300">
</div>
<div class="text">
<b>Text</b>
<p>Text</p>
</div>
<div class="image">
<img src="https://picsum.photos/id/237/200/300">
</div>
<div class="text">
<b>Text</b>
<p>Text</p>
</div>
<div class="image">
<img src="https://picsum.photos/id/237/200/300">
</div>
<div class="text">
<b>Text</b>
<p>Text</p>
</div>
</div>
If you are able to restructure your code into groupings as follows:
<div class="content-block">
<div class="image">
<img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png">
</div>
<div class="text">
<b>Text</b>
<p>Text</p>
</div>
</div>
then you could rewrite the css for your markup in a more compact way that would prevent the need for adding more :nth-of-type statements to your css every time you added a new piece of text or an image.
This css could be written as follows and would account for both mobile and larger breakpoints:
.content-block {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-bottom: 16px;
}
.image,
.text {
display: flex;
flex: 1 1 50%;
align-items: center;
justify-content: center;
padding: 10px 10px 20px 10px;
box-sizing: border-box;
flex-direction: column;
border: 2px solid;
}
.image img {
max-width: 80%;
}
.content-block:nth-of-type(even) .image {
order: 2;
}
#media only screen and (max-width: 768px) {
.content-block {
flex-direction: column;
}
.content-block .image {
order: 1;
}
.content-block .text {
order: 2;
}
}
/* Styles from here and downward can be ignored - they are just for clarity of the example using colours/spacings */
.content-block {
background: aliceblue;
color: black;
}
<div class="desc">
<div class="content-block">
<div class="image left">
Image here
</div>
<div class="text">
<b>Text</b>
<p>Text</p>
</div>
</div>
<div class="content-block">
<div class="image left">
Image here
</div>
<div class="text">
<b>Text</b>
<p>Text</p>
</div>
</div>
<div class="content-block">
<div class="image left">
Image here
</div>
<div class="text">
<b>Text</b>
<p>Text</p>
</div>
</div>
</div>
I am struggling with my code. I need 8 boxes (2 columns with 4 rows) and the content shall be centered (horizontally and vertically). The content will be either an image or a text. The boxes shall have 50% of the width and there shall be space between the two boxes on one line. I tried different ways, but I wasn't successful.
My current code looks like this:
.desc {
display: grid;
grid-template-columns: 50% 50%;
padding-bottom: 30px;
text-align: center;
}
.image {
height: 200px;
max-height: 300px;
max-width: 500px;
object-fit: cover;
object-position: center;
}
.text {
text-align: center;
vertical-align: middle;
}
<div class="desc">
<div class="desc image">
<img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png">
</div>
<div class="text">
<b>Text</b>
<p>Text</p>
</div>
<div class="desc image">
<img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png">
</div>
<div class="text">
<b>Text</b>
<p>Text</p>
</div>
<div class="desc image">
<img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png">
</div>
<div class="text">
<b>Text</b>
<p>Text</p>
</div>
<div class="desc image">
<img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png">
</div>
<div class="text">
<b>Text</b>
<p>Text</p>
</div>
</div>
If you check the below example, there are 8 boxes which are aligned in 2 columns and 4 rows with contents are vertically and horizontally centred. Check it and let me know if this is what you are looking for
* {
box-sizing: border-box;
}
section {
display: flex;
flex-wrap: wrap;
border: 1px solid red;
}
div {
flex: 1;
display: inline-flex;
max-width: 50%;
min-width: 50%;
border: 1px solid #ddd;
justify-content: center;
align-items: center;
text-align: center;
}
.bg-image {
background-image: url('https://i.ytimg.com/vi/k-POG1-Cp1k/maxresdefault.jpg');
background-size: cover;
min-height: 200px;
}
<section>
<div>1</div>
<div>2</div>
<div>3sdass asd assadas asd asdasadas asd asdasdassdaasasd sd as as</div>
<div>4</div>
<div class='bg-image'>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</section>
EDIT
Have updated the snippet with an item with a background-image, the image will automatically resize.
Flex Implementation. An another way.
If you want the texts in the tesxt section to be in two seperate lines, use flex-direction: column; for .text class
.desc {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.image, .text {
display: flex;
flex: 1 1 50%;
align-items: center;
justify-content: center;
padding: 5px;
box-sizing: border-box;
border: 1px dashed black;
flex-direction: column;
}
.image img {
max-width: 100%;
}
<div class="desc">
<div class="image">
<img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png">
</div>
<div class="text">
<b>Text</b>
<p>Text</p>
</div>
<div class="image">
<img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png">
</div>
<div class="text">
<b>Text</b>
<p>Text</p>
</div>
<div class="image">
<img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png">
</div>
<div class="text">
<b>Text</b>
<p>Text</p>
</div>
<div class="image">
<img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png">
</div>
<div class="text">
<b>Text</b>
<p>Text</p>
</div>
</div>
.desc,
.desc_inner {
width: 99%;
overflow: hidden;
margin: 0px auto;
}
.desc_inner {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 2px dashed #f69c55;
}
.text {
width: 100%;
text-align: center;
}
<!-- today -->
<div class="desc">
<div class="desc_inner">
<div class="desc image">
<img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png">
</div>
<div class="text">
<b>Text</b>
<p>Text</p>
</div>
</div>
<div class="desc_inner">
<div class="desc image">
<img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png">
</div>
<div class="text">
<b>Text</b>
<p>Text</p>
</div>
</div>
<div class="desc_inner">
<div class="desc image">
<img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png">
</div>
<div class="text">
<b>Text</b>
<p>Text</p>
</div>
</div>
<div class="desc_inner">
<div class="desc image">
<img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png">
</div>
<div class="text">
<b>Text</b>
<p>Text</p>
</div>
</div>
</div>
I want my three images to align side by side horizontally with captions under each of them, like in this link:(http://www.renaldi.com/projects/)
I tried to do them but failed. Here are my codes:
.photos {
display: flex;
justify-content: center;
}
.image {
display: block;
width: 30%;
}
.word {
display: block;
width: 100%;
text-align: center;
}
<div class="photos">
<img class="image" src="Project1.png">
<span class="word">Manhattan Sunday</span>
</div>
<div class="photos">
<img class="image" src="Project2.png">
<div class="word">Touching Strangers</div>
</div>
<div class="photos">
<img class="image" src="Project3.png">
<div class="word">I want your love</div>
</div>
How to fix them?
You can achieve this by adding a wrapper container, and applying some flexbox css to it. Setting the container to have a flex direction of row is what aligns them horizontally, and setting the flexdirection to column on the photos class is what places the caption beneath the image. For more info on flexbox see https://css-tricks.com/snippets/css/a-guide-to-flexbox/
HTML
<div class="container">
<div class="photos">
<img class="image" src="Project1.png" >
<span class="word">Manhattan Sunday</span>
</div>
<div class="photos">
<img class="image" src="Project2.png" >
<div class="word">Touching Strangers</div>
</div>
<div class="photos">
<img class="image" src="Project3.png" >
<div class="word">I want your love</div>
</div>
</div>
CSS
.container {
display: flex;
flex-direction: row;
flex-grow: 1;
}
.photos{
display:flex;
justify-content:center;
flex-direction: column;
flex-grow: 1;
}
.image{
display:block;
width:30%;
}
.word{
display:block;
width: 100%;
text-align:center;
}
Working example: https://jsfiddle.net/Matthew_/ro1kahj0/2/
You can use figure and figcaption to answer your caption question. It adds accessibility to your website.
<figure>
<img src="project1.png" alt="A picture of Manhattan">
<figcaption>Manhattan Sunday</figcaption>
</figure>
a parent container with flex direction row
flex direction column for each photos child
align items center to center image (thanks #Matthew)
added background color so you can see the extent of each element
.photos {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
background: #fafafa;
}
.image {
display: block;
width: 30%;
}
.word {
display: block;
width: 100%;
text-align: center;
background: #f0f0f0;
}
.photo-list {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
<div class="photo-list">
<div class="photos">
<img class="image" src="https://picsum.photos/200/300?image=1">
<span class="word">Manhattan Sunday</span>
</div>
<div class="photos">
<img class="image" src="https://picsum.photos/200/300?image=2">
<div class="word">Touching Strangers</div>
</div>
<div class="photos">
<img class="image" src="https://picsum.photos/200/300?image=3">
<div class="word">I want your love</div>
</div>
</div>
I have been using CSS grid for these types of layouts:
CSS:
.threeColumnGrid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 10px;
grid-row-gap: 10px;
}
figure.threeColumnGridItem {
display: block;
padding: 10px;
text-align: left;
background-color: #EEE;
margin-inline-start: 0;
margin-inline-end: 0;
}
figure.threeColumnGridItem img {
display: block;
width: 100%;
}
figure.threeColumnGridItem figurecaption {
display:block;
width: 100%;
font-size: 1rem;
margin: 0;
}
HTML:
<div class="threeColumnGrid">
<figure class="threeColumnGridItem">
<img src="http://placekitten.com/g/300/300" alt="" />
<figurecaption>Caption</figurecaption>
</figure>
<figure class="threeColumnGridItem">
<img src="http://placekitten.com/g/400/400" alt="" />
<figurecaption>Caption</figurecaption>
</figure>
<figure class="threeColumnGridItem">
<img src="http://placekitten.com/g/600/600" alt="" />
<figurecaption>Caption</figurecaption>
</figure>
</div>
I have several columns of images of different sizes. As the sizes are unknown, one column will be the tallest. I now want to stretch out the other (smaller) columns to match that height by increasing the gaps between the images accordingly. Here is an example image:
And here is a jsfiddle of this example that I set up with flexbox.
#main {
width: 50%;
display: flex;
justify-content: space-between;
}
.column {
background-color: lightpink;
margin-right: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.column:last-child {
margin-right: 0;
}
.column img {
width: 100%;
align-self: center;
}
<div id="main">
<div class="column">
<img src="http://placekitten.com/g/200/300">
<img src="http://placekitten.com/200/300">
<img src="http://placekitten.com/g/200/400">
</div>
<div class="column">
<img src="http://placekitten.com/g/200/200">
<img src="http://placekitten.com/200/280">
<img src="http://placekitten.com/g/200/250">
</div>
<div class="column">
<img src="http://placekitten.com/g/200/400">
<img src="http://placekitten.com/200/220">
<img src="http://placekitten.com/g/200/260">
</div>
</div>
However in my specific case, I cannot use flexbox (as I need to absolute position some children), so I am now looking for a way to achieve the same thing without flexbox. Is there any way to get this vertical "space-between" distribution without flexbox?
Based on the comment regarding absolute positioning:
I have tried to get the absolute positioning to work without any success. Basically I am trying to place captions underneath each images, however this captions should not be part of the flow, so the gaps should keep the same with as if there were no captions. When I tried to place the captions underneath, I ended up with all captions on the bottom of the entire column.
The solution is to rust wrap the images and captions in a div (or better still a figure) and give that position relative...then position your captions absolutely.
Like so:
#main {
max-width: 80%;
margin: auto;
display: flex;
justify-content: space-between;
}
.column {
background-color: lightpink;
margin-right: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.holder {
position: relative;
}
.column img {
display: block;
max-width: 100%;
height: auto;
}
.caption {
position: absolute;
bottom: 0;
text-align: center;
background: rgba(255, 255, 255, 0.5);
width: 100%;
}
<div id="main">
<div class="column">
<div class="holder">
<img src="http://placekitten.com/g/200/300">
</div>
<div class="holder"> <img src="http://placekitten.com/200/300"></div>
<div class="holder">
<img src="http://placekitten.com/g/200/400">
</div>
</div>
<div class="column">
<div class="holder">
<img src="http://placekitten.com/g/200/200">
<div class="caption">My Caption</div>
</div>
<div class="holder"> <img src="http://placekitten.com/200/280"></div>
<div class="holder">
<img src="http://placekitten.com/g/200/250">
<div class="caption">My Caption</div>
</div>
</div>
<div class="column">
<div class="holder">
<img src="http://placekitten.com/g/200/400">
<div class="caption">Superduper long Caption In Here</div>
</div>
<div class="holder"> <img src="http://placekitten.com/200/220"></div>
<div class="holder">
<img src="http://placekitten.com/g/200/260">
</div>
</div>
</div>
fix image height and use "object-fit:cover;"
#main {
width: 50%;
display: flex;
justify-content: space-between;
}
.column {
background-color: lightpink;
margin-right: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.column:last-child {
margin-right: 0;
}
.column img {
width: 100%;
align-self: center;
height:100px;
object-fit: cover;
}
<div id="main">
<div class="column">
<img src="http://placekitten.com/g/200/300">
<img src="http://placekitten.com/200/300">
<img src="http://placekitten.com/g/200/400">
</div>
<div class="column">
<img src="http://placekitten.com/g/200/200">
<img src="http://placekitten.com/200/280">
<img src="http://placekitten.com/g/200/250">
</div>
<div class="column">
<img src="http://placekitten.com/g/200/400">
<img src="http://placekitten.com/200/220">
<img src="http://placekitten.com/g/200/260">
</div>
</div>
I need to align a div element vertically and horizontally. I did that using flex display, but now the elements are displayed in a single line even though <br> is present. How can I separate the paragraph and image elements into two lines?
.container {
width: 100%;
height: 100%;
}
.center {
display: flex;
justify-content: center;
align-items: center;
}
<div class="container">
<div style="width:100%; height:100%; color:#fff; background-color:black;" class="center">
<p>SOME TEXT</p>
<br>
<img style="max-height:100%; max-width:100%;" src="http://www.jacobsladderky.com/uploads/6/9/1/4/69146851/4652558.png" alt="">
</div>
</div>
Thanks in advance.
You can use flex-direction: column; property to align element in 1
column, see this flexbox documentation.
.container {
width: 100%;
height: 100%;
}
.center {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
<div class="container">
<div style="width:100%; height:100%; color:#fff; background-color:black;" class="center">
<p>SOME TEXT</p>
<img style="max-height:100%; max-width:100%;" src="http://www.jacobsladderky.com/uploads/6/9/1/4/69146851/4652558.png" alt="">
</div>
</div>
<div style="width: 100%;height: 100%;color: #fff;background-color: black;text-align: center;" class="center" data-mce-style="width: 100%; height: 100%; color: #fff; background-color: black;"><p>SOME TEXT</p><br> <img style="max-height: 100%; max-width: 100%;" src="http://www.jacobsladderky.com/uploads/6/9/1/4/69146851/4652558.png" data-mce-src="http://www.jacobsladderky.com/uploads/6/9/1/4/69146851/4652558.png" data-mce-style="max-height: 100%; max-width: 100%;"></div>
JUST CHANGE THIS DIV