I'd like a figcaption to be next to a image in the middle of this image. How can i do this? I have tried like this:
<figure>
<img src="Pic1" style="width:60%; height:auto; float:right" />
<figcaption class="title" style="vertical-align:middle">xxx</figcaption>
</figure>
but the caption is still on the top of the image.
You can make your figure display as flex, and then use auto margins to center the caption.
figure {
display: flex;
}
figure figcaption {
margin: auto 10px;
}
<figure>
<img src="https://picsum.photos/200">
<figcaption>A random picture</figcaption>
</figure>
Try this solution:
figure {
display:table;
}
figure figcaption.title {
display:table-cell;
vertical-align:middle;
}
figure img {
display:table-cell;
width:60%;
}
<figure>
<figcaption class="title">xxx</figcaption>
<img src="http://placehold.it/250x300"/>
</figure>
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 display an image which changing by another image if the mouse is over it (hover). This works perfectly, but the image is not centered. Here is the code I using:
HTML:
<figure><a><img class="hover" src="nachher.jpg" alt="" width="60%" />
<img class="nohover" src="vorher.jpg" alt="" width="60%/" /></a>
<figcaption>some text here</figcaption></figure
CSS:
img.nohover {border:0;}
img.hover {border:0;display:none;}
a:hover img.hover {display:inline;}
a:hover img.nohover {display:none;}
The question is: How can i center the image(s)?
I would move width: 60% to the figure, then make the images width: 100%. Then you can
img.nohover {border:0;}
img.hover {border:0;display:none;}
a:hover img.hover {display:inline;}
a:hover img.nohover {display:none;}
figure {
width: 60%;
margin: auto;
}
img {
width: 100%;
}
<figure>
<a><img class="hover" src="https://i.stack.imgur.com/2C22p.jpg" alt="" />
<img class="nohover" src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="" /></a>
<figcaption>some text here</figcaption>
</figure>
use margin: auto on figure to center it horizontally.
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>
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>
I have four images and I'm trying to put three in the center and one on top of the center image like this:
[image2]
[image1] [image3] [image4]
Here's an image example of what I mean: http://prnt.sc/a9iyu6
The only issue is that all the images are underneath each other.
This is the code I'm currently using:
<img src="images1.png" />
<img src="images2.png" />
<img src="images3.png" />
<img src="images4.png" />
Here's an idea: JsFiddle
This is the css:
#container{
display:flex
}
#centered{
display:flex;
flex-direction:column;
}
And the updated HTML:
<div id="container">
<img src="http://placehold.it/150x250/CCCCCC" />
<div id="centered">
<img src="http://placehold.it/150x150/FEFEFE" />
<img src="http://placehold.it/150x150/AAAAAA" />
</div>
<img src="http://placehold.it/150x250/BBBBBB" />
</div>
Flex-box is pretty cool. Just play around with this for a bit and you'll get it just the way you want it.
Is this what you want?
div {
padding-top:100px;
display:inline-block;
}
img {
float:left;
height:100px;
width:50px;
}
img:nth-child(2) {
margin-top:-100px;
}
<div>
<img src="images1.png" />
<img src="images2.png" />
<img src="images3.png" />
<img src="images4.png" />
</div>
What do You think about solutions like here
I wrote simply CSS which should do the job for You:
body {
text-align: center;
}
img {
float: left;
width: 33%;
height: 100px;
}
img:nth-child(1){
margin-top: 100px;
}
img:nth-child(3) {
margin-top: 100px;
}
img:nth-child(4){
float: left;
clear: both;
margin-left: 33%;
margin-top: -100px;
}
<img src="http://lorempixel.com/200/200/"/>
<img src="http://lorempixel.com/200/200/?v=2"/>
<img src="http://lorempixel.com/200/200/"/>
<img src="http://lorempixel.com/200/200/"/>
In that solution You don't have to add anything to your code except some CSS. Of course You can try to adjust margins to what You axactly want to get.