I am trying to create two columns that are a certain width. Both columns have an image and text below the image. I have managed this with:
.quick-links img {
height: 7.5em;
width: 7.5em;
border-radius: 10em;
margin: 0 15em;
}
.quick-links {
display: flex;
justify-content: center;
}
However, whenever the website shrinks down past about a width of 1200px something weird begins to happen:
https://gyazo.com/5f01aa7248873d999dd6552e089b1c2f
This is extremely annoying because what I thought would be something quite simple to make, has turned out to be a nightmare!
I have also tried:
.quick-links img {
height: 7.5em;
width: 7.5em;
border-radius: 10em;
margin: 0 15em;
}
.quick-links {
column-count: 2;
display; inline-block;
}
However, this issue then occurs:
I am very stumped and would love for someone to help me.
For reference, here is the HTML:
<section class="quicklinks">
<h1>Quicklinks</h1>
<div class="quick-links">
<!-- Client Reviews -->
<figure class="reviews">
<img src="images/RatingsTick.png" alt="Ratings Tick Image">
<figcaption class="port-desc">
<p><strong>Reviews</strong></p>
<p>-Filler Text-</p>
</figcaption>
</figure>
<!-- Portfolio -->
<figure class="portfolio">
<img src="images/Portfolio.png" alt="Portfolio Image">
<figcaption class="port-desc">
<p><strong>Previous Work</strong></p>
<p>-Filler Text-</p>
</figcaption>
</figure>
</div>
</section>
To allow flex children to wrap you need to set flex-wrap:wrap;.
You may also set a min-width to create a break point almost alike mediaquerie would.
.quick-links {
display: flex;
align-items: center;
justify-content: center;
max-width: 100%;
text-align: center;
flex-wrap: wrap;
}
figure {
min-width:25em;/* or whatever value suits your needs */
border: solid;/* see me */
}
h1 {
text-align: center;
}
<section class="quicklinks">
<h1>Quicklinks</h1>
<div class="quick-links">
<!-- Client Reviews -->
<figure class="reviews">
<img src="images/RatingsTick.png" alt="Ratings Tick Image">
<figcaption class="port-desc">
<p><strong>Reviews</strong></p>
<p>-Filler Text-</p>
</figcaption>
</figure>
<!-- Portfolio -->
<figure class="portfolio">
<img src="images/Portfolio.png" alt="Portfolio Image">
<figcaption class="port-desc">
<p><strong>Previous Work</strong></p>
<p>-Filler Text-</p>
</figcaption>
</figure>
</div>
</section>
About column-count, it can seem usefull but this is a CSS rule that unfortunately remained in the css draft, flex seems much more efficient here.
Remove the margin from the img elements and it will center properly.
Use .quick-links figure { min-width: 500px;} to set a minimum width on the text.
Related
I'm trying to align my images for a photography portfolio in a single, scrollable row and also want to make them responsive to window resizing and other screen sizes. Essentially to just have them shrink and grow as the screen changes. Previously I had them in a scrollable row but now that I've tried to make them responsive, they just adjust and shrink down and show the entire image gallery without scroll, but are really small since they are all trying to fit inside the window.
Here's what I have so far
img {
display: block;
width: 100%;
transition: .3s;
}
.flex-container {
display: flex;
padding: 5px;
transition: .3s;
overflow-x: scroll;
}
.sub-container {
display: flex;
flex-direction: row;
overflow-x: auto;
/*width: 50%;*/
}
.gallery__thumb {
position: relative;
}
<div class="flex-container">
<div class = "sub-container">
<figure class="gallery__thumb">
<img src="highq.jpg" alt="">
</figure>
<figure class="gallery__thumb">
<img src="highq.jpg" alt="">
</figure>
<figure class="gallery__thumb">
<img src="highq.jpg" alt="">
</figure>
<figure class="gallery__thumb">
<img src="highq.jpg" alt="">
</figure>
<figure class="gallery__thumb">
<img src="highq.jpg" alt="">
</figure>
</div>
</div>
You may want to consider adding a min-width to the images in percentage units of measurement. This will allow the images to grow in size and shrink always keeping the minimum amount of length as a percentage of the parents total width.
In the example below I reset margin and padding to 0 using a universal selector => *, this will remove any unseen/unwanted margin or padding set by default browser settings for elements.
Then we align the flex sub-container vertically using align-items: center; each figure element .gallery__thumb will set min-width: 33%. A slight gap of 10px margin between each remaining .gallery__thumb using general sibling combinator ~ => .gallery__thumb ~ .gallery__thumb { margin-left: 10px; }.
Now as you resize the browser there will always be 3 images showing no matter the size of the browser. If you want 4 to show, change to 25%, 5 to 20%, etc... In some cases, you may need to add a calculated measurement using width: calc(33% - 20px), where 20 pixels may represent 10 pixels of left and right margin on a parent container for example.
See resizing browser GIF
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
display: block;
width: 100%;
}
.gallery__thumb ~ .gallery__thumb {
margin-left: 10px;
}
.sub-container {
display: flex;
overflow-x: auto;
align-items: center;
}
.gallery__thumb {
min-width: 33%;
}
<div class="flex-container">
<div class="sub-container">
<figure class="gallery__thumb">
<img src="https://placeimg.com/300/260/any" alt="">
</figure>
<figure class="gallery__thumb">
<img src="https://placeimg.com/320/260/any" alt="">
</figure>
<figure class="gallery__thumb">
<img src="https://placeimg.com/310/280/any" alt="">
</figure>
<figure class="gallery__thumb">
<img src="https://placeimg.com/340/280/any" alt="">
</figure>
<figure class="gallery__thumb">
<img src="https://placeimg.com/300/260/any" alt="">
</figure>
</div>
</div>
I have the two images below in HTML and wanted to put them next to each other,however it seems one gets placed under the other.I have used the CSS display:inline-block to address this issues.
HTML :
<figure>
<div class="child">
<img class="childhood" src="/home/ali/FullStack/try/Images/1.JPG">
<img class="childhood" src="/home/ali/FullStack/try/Images/2.JPG">
<figcaption>
SOME TEXT
</figcaption>
</div>
</figure>
CSS:
.childhood {
display: inline;
float:left;
margin: 0px;
padding: 0px;
}
I Was wondering what am I doing wrong that is preventing the two images from being displayed next to each other?
your code is working, maybe the size of your two images can't fit in the screen
check this code:
.childhood {
display: inline;
float:left;
margin: 0px;
padding: 0px;
width: 200px;
}
<figure>
<div class="child">
<img class="childhood" src="https://i.ibb.co/c3y4KSf/104938518-2777265905826942-8721565023138927238-o.jpg">
<img class="childhood" src="https://i.ibb.co/c3y4KSf/104938518-2777265905826942-8721565023138927238-o.jpg">
<figcaption>
SOME TEXT
</figcaption>
</div>
</figure>
try this:
.child {
display: flex;
aign-items: center;
justify-content: center;
flex-wrap: wrap;
}
figcaption {
width: 100%;
}
.childhood {
width: 50%;
}
Let me know
This question already has answers here:
Two images side by side and responsive
(3 answers)
Closed 6 years ago.
I am having trouble with html/css image alignment.
I had a html page with lots of text and two images held in figure markup and figcaption tags.
When I apply the following CSS to it it makes by images side-by-side and messes up the whole flow of the page..
img {
float:right;
margin:0px 0px 10px 10px;
}
Below is my html with the text cut short for space saving on here:
<figure>
<img src="http-message.gif" alt="A di">
<figcaption>Figur</figcaption>
</figure>
<p>The HTTP request message is route</p>
<figure>
<img src="www-diagram.gif" alt="A diagram">
<figcaption>Figure 2. (1) The HTTP Req
</figcaption>
</figure>
img {
float: right;
margin: 0px 0px 10px 10px;
}
<figure>
<img src="https://i.stack.imgur.com/Scqxm.png?s=64&g=1" alt="A di">
<figcaption>Figur</figcaption>
</figure>
<p>The HTTP request message is route</p>
<figure>
<img src="https://i.stack.imgur.com/Scqxm.png?s=64&g=1" alt="A diagram">
<figcaption>Figure 2. (1) The HTTP Req</figcaption>
</figure>
Can anybody help me make sure the images flow down the page as intended?
Many thanks.
here is the sample Demo
.container{
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
img{
max-width: 120px;
}
figure{
text-align: center;
}
p{
width: 100%;
text-align: center;
}
<div class="container">
<figure>
<img src="http://smalldata.io/startup/common-files/icons/sdl_logo.png" alt="A di">
<figcaption>Figur caption</figcaption>
</figure>
<figure>
<img src="https://sixpillarstopersia.files.wordpress.com/2012/07/fb_logo1.png" alt="A diagram">
<figcaption>Figure 2. (1) The HTTP Req
</figcaption>
</figure>
<p>The HTTP request message is route</p>
</div>
So I've spent the last hour or so trying to figure out how to put captioned images next to each other. Most solutions/questions other people have don't work when I try to add text below it using figcaption or something of that sort.
I want the text to be underneath the images and move with the images but for some reason it moves the other image to another layer when I add text. Any help would be greatly appreciated. Thank you.
(This is only a small portion of it because there's a lot of other stuff not related to this issue in that style)
.gunimage {
display: inline-block;
margin-left: auto;
margin-right: auto;
width: 15%;
padding-left: 20px;
}
#images {
text-align: center;
}
<div id="images">
<img class="gunimage" border="0" alt="idk" src="gg.png" /></a>
<p>this is text</p>
<img class="gunimage" border="0" alt="idk" src="gg2.png" /></a>
<p>this is also text</p>
</div>
This method uses HTML 5 figure and figcaption elements, and CSS 3 flexbox.
#images {
display: flex;
justify-content: center;
}
figure {
text-align: center;
}
<div id="images">
<figure>
<img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
<figcaption>this is text</figcaption>
</figure>
<figure>
<img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
<figcaption>this is also text</figcaption>
</figure>
</div>
NOTE: Flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes, use Autoprefixer. More details in this answer.
Here is a solution using floats
.gunimage {
display: inline-block;
margin-left: auto;
margin-right: auto;
width: 15%;
}
.half {
width:50%;
float: left;
}
#images {
text-align: center;
width: 100%;
}
<div id="images">
<div class="half">
<img class="gunimage" border="0" alt="idk" src="gg.png">
<p>this is text</p>
</div>
<div class="half">
<img class="gunimage" border="0" alt="idk" src="gg2.png">
<p>this is also text</p>
</div>
</div>
I'm sorry if this is a repost, but this is something I've been researching on here for awhile now and I can't seem to come up with the right answer. I'm trying to get these images to appear in the exact center of the page with the captions underneath, but they keep going on the left side of the page.
Here's my html
<figure>
<img src="apple.jpg" alt='apple/>
<figcaption>Apple</figcaption>
</figure>
<figure>
<img src="apple.jpg" alt='apple'/>
<figcaption>Apple</figcaption>
</figure>
<figure>
<img src="apple.jpg" alt='apple'/>
<figcaption>Apple</figcaption>
</figure>
And the css
figure{
display: inline-block;
margin: 0 auto;
}
figure img{
vertical-align: top;
}
figure figcaption{
text-align: center;
}
Here's what I see:
Thanks in advance. I greatly appreciate any help.
You want them horizontally or vertically aligned?
vertically:
figure {
display: block;
text-align: center
}
horizontally:
body {
text-align: center;
}
figure {
display: inline-block;
text-align: center
}
Try wrapping your elements with Div container to control the position.
This is a hacky way of doing it. But you can adjust the .center class to get it where you want on the page, i.e. adjust the right: and/or left properties.
.container {
position: center;
width: 100%;
}
.center {
position: absolute;
right: 30%;
width: 300px;
background-color: #b0e0e6;
}
figure{
display: inline-block;
margin: 0 auto;
}
figure img{
vertical-align: top;
}
figure figcaption{
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="center">
<figure>
<img src="apple.jpg" alt='apple/>
<figcaption>Apple</figcaption>
</figure>
<figure>
<img src="apple.jpg" alt='apple'/>
<figcaption>Apple</figcaption>
</figure>
<figure>
<img src="apple.jpg" alt='apple'/>
<figcaption>Apple</figcaption>
</figure>
</div>
</div>
html
<figure>
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" />
<figcaption>Apple</figcaption>
</figure>
<figure>
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" />
<figcaption>Apple</figcaption>
</figure>
<figure>
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" />
<figcaption>Apple</figcaption>
</figure>
css
figure{
width:30%;
display:inline-block;
margin:1%;
margin-left:1.5%;
}
figure img{
width:100%;
display:block;
margin-left:auto;
margin-right:auto;
}
figure figcaption{
text-align: center;
}
https://jsfiddle.net/Ljdxnwot/3/
Update
OP has clarified that the images are to be side-by-side and centered vertically as well.
Place everything in a div or section (any block element will do)
I used a section with the following styles:
display: table; will make it act like a table
height: 100vh; will make it as tall as the viewport (your screen)
margin: 0 auto; auto will adjust left and right until both are equal
Added the following to the figures:
display: table-cell; will make it act like a table cells
vertical-align : middle; will actually work on table cells
Updated Snippet
section {
display: table;
height: 100vh;
margin: 0 auto;
}
figure {
vertical-align : middle;
display: table-cell;
margin: 0 auto;
text-align: center;
}
figure img {
width: 20em;
}
figure figcaption {
text-align: center;
}
<section>
<figure>
<img src="http://i.imgur.com/r3m3gMJ.jpg" alt='apple' />
<figcaption>Apple</figcaption>
</figure>
<figure>
<img src="http://i.imgur.com/r3m3gMJ.jpg" alt='apple' />
<figcaption>Apple</figcaption>
</figure>
<figure>
<img src="http://i.imgur.com/r3m3gMJ.jpg" alt='apple' />
<figcaption>Apple</figcaption>
</figure>
</section>
- There's a "'" (single quote) missing on the first alt
Change figure to block or remove it as I did since figure is display: block by default.
Add text-align: center to figure
Note: the original image was off center (of course), so I edited it to be symmetrical.
See snippet below.
Snippet
figure {
margin: 0 auto;
text-align: center;
}
figure img {
vertical-align: top;
width: 20em;
}
figure figcaption {
text-align: center;
}
<figure>
<img src="http://i.imgur.com/r3m3gMJ.jpg" alt='apple' />
<figcaption>Apple</figcaption>
</figure>
<figure>
<img src="http://i.imgur.com/r3m3gMJ.jpg" alt='apple' />
<figcaption>Apple</figcaption>
</figure>
<figure>
<img src="http://i.imgur.com/r3m3gMJ.jpg" alt='apple' />
<figcaption>Apple</figcaption>
</figure>