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>
Related
I'm new to coding and basically don't understand anything and I've been trying to solve this problem for about a week and haven't got anywhere close
here is my HTML code
.cats {
height: 118px;
width: auto;
object-position: 1px;
display: inline-block;
vertical-align: middle;
}
<div>
<img class="cats" src="black.jpeg" alt="beautiful cat">
<span style="text-align: center;">cutie</span>
</div>
I'm trying to have the image at the left like it is by default and have my text in the same line aligned to the center of the page.
Is this what your looking for? For the <img> to be positioned at the top left of the viewport and the <span> text to be centered on the page. Try this out.
.cats {
height: 118px;
width: auto;
object-position: 1px;
display: inline-block;
vertical-align: middle;
}
.container {
display: flex;
align-items: center;
}
.container span {
/* width: 85%; vary width to your liking if need be */
margin: 0 auto;
}
<div class="container">
<img class="cats" src="https://i.ibb.co/56tbCQP/Screen-Shot-2021-02-25-at-8-46-16-PM.png" alt="beautiful cat">
<span style="text-align: center;">cutie</span>
</div>
You can add display: block to span tag.
<span style="text-align: center; display: block">cutie</span>
If I'm understanding you correctly that you want the text centered and to the right of the photo then flexbox can help here. Try this snippet:
<div style="display: flex; align-items: center">
<img class="cats" src="black.jpg" alt="beautiful cat">
<span style="text-align: center; padding-left: 20px;">cutie</span>
</div>
If you are wanting the text below the picture I suggest using <figure> and <figcaption>:
<figure>
<img class="cats" src="black.jpg" alt="beautiful cat">
<figcaption style="text-align: center;">cutie</figcaption>
</figure>
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
I have a row with seven small images and a heading which I need to stack horizontally but they're stacking vertically. This is how it looks -
I'm sure this is really simple but I'm stumped. I'm using reset & skeleton grid. This is the relevant code -
HTML
<section id="products">
<div class="container">
<div class="row">
<div class="twelve columns agencyproducts">
<h2>WHAT PRODUCT ARE YOU INTERESTED IN?</h2>
<img src="images/production.png" alt="Production" style="width:50px;height:50px;">
<h4>2K / 4K PRODUCTION</h4>
<img src="images/post-production.png" alt="Post-Production" style="width:50px;height:50px;">
<h4>POST PRODUCTION</h4>
<img src="images/animation.png" alt="Animation" style="width:50px;height:50px;">
<h4>2D / 3D ANIMATION</h4>
<img src="images/ADHOC.png" alt="ADHOC" style="width:50px;height:50px;">
<h4>ADHOC</h4>
<img src="images/interactive.png" alt="Interactive" style="width:50px;height:50px;">
<h4>INTERACTIVE & PERSONALISED</h4>
<img src="images/tv-adverts.png" alt="TV ADVERTS" style="width:50px;height:50px;">
<h4>TV ADVERTS</h4>
<img src="images/360.png" alt="360 Video and VR" style="width:50px;height:50px;">
<h4>360 VIDEO & VIRTUAL REALITY</h4>
</div>
</div>
CSS
section#products {
height: 700px;
max-width: 100%
}
.row {
height: 350px;
max-width: 100%;
}
.agencyproducts {
position: relative;
display: block;
text-align: center;
}
.agencyproducts img {
position: relative;
line-height: 1;
top: 50%;
}
.agencyproducts h4 {
display: block;
text-align: center;
font-size: 10px;
}
The h4 tags which you re using as captions are block elements, which means, their width is 100% by default. Also, you have nothing that associates/unifies them with the images they belong to.
The common way nowadays is to use a figuretag to wrap image and text, and put the text into a figcaptiontag inside that figure tag. Then apply text-align: center; and display: inline-block; to the figure tag to center image and text inside and allow them to appear next to each other:
figure {
text-align: center;
display: inline-block;
max-width: 100px;
vertical-align: top;
margin:10px;
}
<figure>
<img src="http://placehold.it/80x80/cac">
<figcaption>
This is an image
</figcaption>
</figure>
<figure>
<img src="http://placehold.it/80x80/cac">
<figcaption>
This is an image with a longer caption
</figcaption>
</figure>
<figure>
<img src="http://placehold.it/80x80/cac">
<figcaption>
This is an image
</figcaption>
</figure>
Images and Headers by default have display set to block, meaning they are on their own lines. float used to be the preferred way of achieving single-line display for block elements but it should be avoided as float has some weird behaviors. Instead we now use display: inline-block; or display: inline; - apply this to the elements you want on a single line and it will make it so!
just example (not copying your code - just simple example script):
HTML:
<div>
<img src="one.png" class="inlineImg" />
<img src="two.png" class="inlineImg" />
<img src="three.png" class="inlineImg" />
</div>
CSS:
.inlineImg {display: inline;}
this will display the images on a single line (providing the div is big enough)
.agencyproducts {
position: relative;
display: inline-flex;
text-align: center;
}
And you could put the main title outside of row div
That should all make them horizontal. You may need to add some padding to separate the items tho.
You can wrap the img- and h4-Tags with a div-Tag and make it float.
<div class="wrapper">
<img src="images/production.png" alt="Production" style="width:50px;height:50px;">
<h4>2K / 4K PRODUCTION</h4>
</div>
CSS:
.wrapper {
float: left;
}
Don't forget to unfloat afterwards.
The H4 will make them 'stack' vertically. Best to enclose each image and heading in it's own block or span, and on that div/span use " display: block; float: left;".
Basicly the h4 element has automaticly a wifth of 100%, you can check this easily with the inspection tool of your browser.
The easiest was is to put a div arround h and img element
<div class="containerIcon">
//img element
//h element
</div>
.conainterIcon {
display: block;
width: 13%, //So they all fit in one line
float: left;
}
Put the image and the title below in a div, and float them all to the left. Like so—
.bullet-point { float: left; }
.clear-float { clear: both; }
<div class="bullet-point">
<img src="images/production.png" alt="Production">
<h4>2K / 4K PRODUCTION</h4>
</div>
<div class="bullet-point">
<img src="images/production.png" alt="Production">
<h4>2K / 4K PRODUCTION</h4>
</div>
.
.
.and so on
<div class="clear-float"></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'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>