I'm having trouble figuring out how to center an image vertically and horizontally. Essentially I have two rows of images, all have a width of 150 but heights vary.
CSS
.image-center {
display: inline-block;
vertical-align: middle;
position: relative;
}
HTML
<div class="row">
<div class="col">
<img class="center-block image-center" width="150" src="imagery/1.png"/>
</div>
<div class="col">
<img class="center-block image-center" width="150" src="imagery/2.png"/>
</div> <div class="col">
<img class="center-block image-center" width="150" src="imagery/3.png"/>
</div> <div class="col">
<img class="center-block image-center" width="150" src="imagery/4.png"/>
</div>
</div>
<div class="row">
<div class="col">
<img class="center-block" width="150" src="imagery/5.png"/>
</div> <div class="col">
<img class="center-block" width="150" src="imagery/6.png"/>
</div> <div class="col">
<img class="center-block" width="150" src="imagery/7.png"/>
</div> <div class="col">
<img class="center-block" width="150" src="imagery/8.png"/>
</div>
</div>
If you're using Bootstrap 4 (it seems you are), you may use flex alignment classes like align-items-center justify-content-center
<div class="col d-flex align-items-center justify-content-center">
More info: https://getbootstrap.com/docs/4.1/layout/grid/#alignment
This CSS will be responsive for any devices. It will center horizontally and vertically.
.col {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
HTML:
<div class="row imageCenterAlign topAlign">
<div class="col">
<img class="center-block image-center" width="150" src="imagery/1.png"/>
</div>
<div class="col">
<img class="center-block image-center" width="150" src="imagery/2.png"/>
</div> <div class="col">
<img class="center-block image-center" width="150" src="imagery/3.png"/>
</div> <div class="col">
<img class="center-block image-center" width="150" src="imagery/4.png"/>
</div>
</div>
<div class="row imageCenterAlign">
<div class="col">
<img class="center-block" width="150" src="imagery/5.png"/>
</div> <div class="col">
<img class="center-block" width="150" src="imagery/6.png"/>
</div> <div class="col">
<img class="center-block" width="150" src="imagery/7.png"/>
</div> <div class="col">
<img class="center-block" width="150" src="imagery/8.png"/>
</div>
</div>
css:
.imageCenterAlign{
display: flex;
justify-content: center;
align-items: center;
}
.topAlign{
top:50%;
}
The best way to accomplish this would be to use flexbox imho.
HTML:
<div class="group">
<img src="https://fakeimg.pl/150x100/?text=Hello" />
<img src="https://fakeimg.pl/150x110/?text=Hello" />
<img src="https://fakeimg.pl/150x120/?text=Hello" />
<img src="https://fakeimg.pl/150x80/?text=Hello" />
<img src="https://fakeimg.pl/150x70/?text=Hello" />
<img src="https://fakeimg.pl/150x100/?text=Hello" />
<img src="https://fakeimg.pl/150x115/?text=Hello" />
<img src="https://fakeimg.pl/150x90/?text=Hello" />
<img src="https://fakeimg.pl/150x100/?text=Hello" />
<img src="https://fakeimg.pl/150x120/?text=Hello" />
</div>
CSS:
DIV.group {
display:flex;
flex-flow:row wrap;
justify-content:space-between;
align-items:center;
align-content:stretch;
}
I will recommend you to use the display:flex, you just need to create an horizontal class and a vertical class an assign it to the divs of the image depending of the orientation you want to give it.
It's easy and simple, I write you the snippet, you just need to change the margins, and I also changed the image.
div.horizontal {
display: flex;
justify-content: center;
margin-bottom: 15px;
}
div.vertical {
display: flex;
flex-direction: column;
justify-content: center;
margin-right: 15px;
}
<div class="row horizontal">
<div class="col vertical">
<img class="center-block image-center" width="150" src="https://www.alliedmetrics.com/images/black-viton-seals.png"/>
</div>
<div class="col vertical">
<img class="center-block image-center" width="150" src="https://www.alliedmetrics.com/images/black-viton-seals.png"/>
</div> <div class="col vertical">
<img class="center-block image-center" width="150" src="https://www.alliedmetrics.com/images/black-viton-seals.png"/>
</div> <div class="col vertical">
<img class="center-block image-center" width="150" src="https://www.alliedmetrics.com/images/black-viton-seals.png"/>
</div>
</div>
<div class="row horizontal">
<div class="col vertical">
<img class="center-block" width="150" src="imagery/5.png"/>
</div> <div class="col vertical">
<img class="center-block " width="150" src="imagery/6.png"/>
</div> <div class="col vertical">
<img class="center-block" width="150" src="imagery/7.png"/>
</div> <div class="col vertical">
<img class="center-block" width="150" src="imagery/8.png"/>
</div>
</div>
Hope it helps you.
don't know about bootstrap but if you use normal CSS
apply this class to the child container
position: absolute,
margin: auto,
top: 0,
right: 0,
bottom: 0,
left: 0,
Related
I try to make a 3-column grid with images so that some text overlays these images. I found an example of the linear gradient for this purpose:
.card__content {
position: absolute;
background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
}
So in HTML I have the next:
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-12 thumb">
<div class="thumbnail" style="position:relative;">
<img src="1.jpg" align="left" class="img-rounded img-responsive">
<div class="card__content">
<h3>Matricaria is a genus of flowering plants in the chamomile tribe within the sunflower family</h3>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 thumb">
<div class="thumbnail" style="position:relative;">
<img src="2.jpg" align="left" class="img-rounded img-responsive">
<div class="card__content">
<h3>Gulls, or colloquially seagulls, are seabirds of the family Laridae in the suborder Lari</h3>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 thumb">
<div class="thumbnail" style="position:relative;">
<img src="3.jpg" align="left" class="img-rounded img-responsive">
<div class="card__content">
<h3>Cirsium arvense is a perennial species of flowering plant in the family Asteraceae</h3>
</div>
</div>
</div>
</div>
</div>
But this gradient doesn't glue to the end of the image and climbs out to the right. And the thumbnail's border doesn't stretch for all length of the block, though without the gradient it did. Here is what it looks like now.
Image
Please help!
I have made a few changes:
.card__content {
position: absolute;
background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
height: 100%;
display: flex;
align-items: center;
padding: 10px;
color: #fff;
}
.thumbnail {
display: inline-block;
border: 0;
}
.thumbnail img {
width: 100%;
max-width: 100%
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-12 thumb">
<div class="thumbnail" style="position:relative;">
<img src="https://images.pexels.com/photos/13639773/pexels-photo-13639773.jpeg?cs=srgb&dl=pexels-andrea-garibay-13639773.jpg&fm=jpg" align="left" class="img-rounded img-responsive">
<div class="card__content">
<h3>Matricaria is a genus of flowering plants in the chamomile tribe within the sunflower family</h3>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 thumb">
<div class="thumbnail" style="position:relative;">
<img src="https://images.pexels.com/photos/13639773/pexels-photo-13639773.jpeg?cs=srgb&dl=pexels-andrea-garibay-13639773.jpg&fm=jpg" align="left" class="img-rounded img-responsive">
<div class="card__content">
<h3>Gulls, or colloquially seagulls, are seabirds of the family Laridae in the suborder Lari</h3>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 thumb">
<div class="thumbnail" style="position:relative;">
<img src="https://images.pexels.com/photos/13639773/pexels-photo-13639773.jpeg?cs=srgb&dl=pexels-andrea-garibay-13639773.jpg&fm=jpg" align="left" class="img-rounded img-responsive">
<div class="card__content">
<h3>Cirsium arvense is a perennial species of flowering plant in the family Asteraceae</h3>
</div>
</div>
</div>
</div>
</div>
I have a page with preview of images. All images are different size, but preview should be all square.
/* This is the CSS code which sets automatic height: */
.preview-img {
width: 100%;
height: auto;
object-fit: cover;
}
<div class="row">
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#image1">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<p class="text-white">Full size</p>
</div>
</div>
<img class="img-fluid preview-img" src="img/01-thumbnail.jpg" alt="">
</a>
<div class="portfolio-caption">
<h4>Image name</h4>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#image2">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<p class="text-white">Full size</p>
</div>
</div>
<img class="img-fluid preview-img" src="img/02-thumbnail.jpg" alt="">
</a>
<div class="portfolio-caption">
<h4>Image name</h4>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#image3">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<p class="text-white">Full size</p>
</div>
</div>
<img class="img-fluid preview-img" src="img/03-thumbnail.jpg" alt="">
</a>
<div class="portfolio-caption">
<h4>Image name</h4>
</div>
</div>
</div>
How can I set the height of an image according to it's width, without using pixels?
.preview-img {
width: 100%;
padding-bottom: 100%;
height: 0;
object-fit: cover;
}
This should work on all major browsers.
If you can use javascript,
window.addEventListener("resize", function(e) {
var element = document.getElementsByClassName("preview-img");
mapElement.style.height = mapElement.width;
});
I use Polo - Responsive Multi-Purpose HTML5 Template.
I can't center my object
I did try many solutions, and nothing work for me still on left side.
See screenshot
<!--Single image lightbox -->
<div class="hr-title hr-long center"><abbr>Single image lightbox</abbr> </div>
<div class="row col-no-margin">
<div class="col-md-4">
<div class="grid-item">
<div class="grid-item-wrap">
<div class="grid-image"> <img alt="Image Lightbox" src="https://via.placeholder.com/300x200" /> </div>
<div class="grid-description">
<a title="Paper Pouch!" data-lightbox="image" href="https://via.placeholder.com/300x200" class="btn btn-light btn-rounded">Zoom</a>
</div>
</div>
</div>
</div>
<!--Single image lightbox -->
<hr class="space">
</div>
Add below CSS to center align the image
img {
margin-left: 50%;
transform: translateX(-50%);
}
<!--Single image lightbox -->
<div class="hr-title hr-long center"><abbr>Single image lightbox</abbr> </div>
<div class="row col-no-margin">
<div class="col-md-4">
<div class="grid-item">
<div class="grid-item-wrap">
<div class="grid-image"> <img alt="Image Lightbox" src="https://via.placeholder.com/600x400" /> </div>
<div class="grid-description">
<a title="Paper Pouch!" data-lightbox="image" href="images/mockup/1.jpg" class="btn btn-light btn-rounded">Zoom</a>
</div>
</div>
</div>
</div>
</div>
<!--Single image lightbox -->
<hr class="space">
This is not the only solution, this is a suggestion :)
You can just use class offset-md-4 combined with text-center and it should work.
Also think about mobile. I have added offset-2 and col-8 to make sure it looks good on small screen too.
img {
max-width: 100%;
margin: auto;
display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="hr-title hr-long center">
<abbr>Single image lightbox</abbr>
</div>
<div class="container">
<div class="row col-no-margin">
<div class="offset-2 col-8 offset-md-4 col-md-4 text-center">
<div class="grid-item">
<div class="grid-item-wrap">
<div class="grid-image"> <img alt="Image Lightbox" src="https://via.placeholder.com/300x200" /></div>
<div class="grid-description">
<a title="Paper Pouch!" data-lightbox="image" href="https://via.placeholder.com/300x200" class="btn btn-light btn-rounded">Zoom</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Single image lightbox -->
<hr class="space">
Instead of
<div class="col-md-4">
Do the following:
<div class="col-md-12 text-center">
.text-center is the bootstrap class which will center the image with respect to the column
.col-md-12 will imply there is only 1 column in the entire row
I have the following bootstrap code:
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 col-md-2 col-sm-2">
<div style="width: 75px; background-color: #ccc">
<img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
</div>
<div class="col-xs-10 col-md-10 col-sm-10" style="">
Right content
</div>
</div>
</div>
On tablets and desktops, this code looks good. However, on smaller devices, xs, the right content flows into the image. I am trying to make the text just wrap on the right and not collide with the image.
I have a fiddle here so you can see what I'm talking about. If you open the fiddle and resize the browser small enough, you'll see the right text overlap onto the image. How can I prevent this?
Try this.
<div class="container-fluid">
<div class="row">
<div class="col-xs-3 col-md-2 col-sm-2">
<div style="width: 75px; background-color: #ccc">
<img class="img-responsive" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
</div>
<div class="col-xs-9 col-md-10 col-sm-10" style="">
Right content
</div>
</div>
</div>
It is because of the width set.
Try this.
JSFiddle
HTML
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 col-md-2 col-sm-2">
<div style="background-color: #ccc">
<img class="test-image" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
</div>
<div class="col-xs-10 col-md-10 col-sm-10" style="">
Right content
</div>
</div>
</div>
CSS
.test-image{
width:100%;
height:auto;
min-width:25px;
}
Easiest way I know is to apply a direct width to element. You could theoretically alter the bootstrap 3 SCSS or LESS (whichever you use) and add in a special column class, but this is the most direct method.
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div style="width:75px" class="col-xs-2">
<div style="width: 75px; background-color: #ccc">
<img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
</div>
<div class="col-xs-10 col-md-10 col-sm-10" style="">
Right content
</div>
</div>
</div>
It is becaue of the width of the col-xs-2.You can chage that.Or try an alternative solution like this
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div style="width: 75px; background-color: #ccc;display:table-cell;">
<img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
<div class=" " style="display:table-cell;vertical-align:middle;">
Right content
</div>
</div></div></div>
Or with css flexboxes like
<div class="container-fluid">
<div class="row">
<div class="col-xs-12" style="display:flex">
<div style="width: 75px; background-color: #ccc;flex:1;">
<img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
<div class=" " style="flex:1;vertical-align:middle;">
Right content
</div></div></div></div>
I am trying to align images horizontally but there is a weird cascading down effect. How can I solve this?
HTML (Drupal)
<div class="view-content">
<div class="views-row views-row-1 views-row-odd views-row-first">
<div class="views-field views-field-title">
<span class="field-content">Up Country</span>
</div>
<div class="views-field views-field-field-book-image">
<div class="field-content">
<img typeof="foaf:Image" src="xxx.jpg" width="126" height="192" alt="" />
</div>
</div>
</div>
</div>
CSS
.field-content img {
float: left;
padding-right: 10px;
max-width: 100%;
height: auto;
}
Image
hi as you said here is the solution may be what you want please look out the code
.view-content{
display:block;
}
.views-row{
float:left;
margin:5px;
padding:5px;
border:1px solid grey;
}
.views-field.views-field-title {
text-align: center;
}
.field-content img {
width: 150px;
height: 200px;
}
<div class="view-content">
<div class="views-row views-row-1 views-row-odd views-row-first">
<div class="views-field views-field-title">
<span class="field-content">Up Country</span>
</div>
<div class="views-field views-field-field-book-image">
<div class="field-content">
<a href="/country">
<img src="http://www.iconpng.com/png/stickers/books.png" alt="Smiley face">
</a>
</div>
</div>
</div>
<div class="views-row views-row-1 views-row-odd views-row-first">
<div class="views-field views-field-title">
<span class="field-content">Up Country</span>
</div>
<div class="views-field views-field-field-book-image">
<div class="field-content">
<a href="/country">
<img src="http://icons.iconarchive.com/icons/itzikgur/my-seven/512/Books-2-icon.png" alt="Smiley face">
</a>
</div>
</div>
</div>
<div class="views-row views-row-1 views-row-odd views-row-first">
<div class="views-field views-field-title">
<span class="field-content">Up Country</span>
</div>
<div class="views-field views-field-field-book-image">
<div class="field-content">
<a href="/country">
<img src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/simple-black-square-icons-culture/126872-simple-black-square-icon-culture-books3-stacked.png" alt="Smiley face">
</a>
</div>
</div>
</div>
</div>
and here is the demo working code of this code
DEMO
You should wrap your Book html (title, link, image) in one div. And set float to that div wrapper. Like this:
<div class="book">
<div class="book-title">Up Country</div>
<div class="book-image"><img src="#1" alt="" /></div>
</div>
<div class="book">
<div class="book-title">The Quest</div>
<div class="book-image"><img src="#2" alt="" /></div>
</div>
<div class="book">
<div class="book-title">Radiant Angel</div>
<div class="book-image"><img src="#3" alt="" /></div>
</div>
And the book div will have this style:
.book {
float: left;
}
You don't have to put many "classes" and "divs". It can make you more confused and if you don't remove them, you have to put many properties in your classes. I think the codes below will solve your problem.
.field-content img {
float: left;
padding-right: 10px;
max-width: 100%;
height: auto;
}
.views-field {
float:left;
}
<div class="view-content">
<div class="views-row views-row-1 views-row-odd views-row-first">
<div class="views-field">
Up Country <br/>
<img typeof="foaf:Image" src="xxx.jpg" width="126" height="192" alt="" />
</div>
<div class="views-field">
Up Country <br/>
<img typeof="foaf:Image" src="xxx.jpg" width="126" height="192" alt="" />
</div>
<div class="views-field">
Up Country <br/>
<img typeof="foaf:Image" src="xxx.jpg" width="126" height="192" alt="" />
</div>
</div>
</div>
Add following css code snippet into your code:
.views-row.views-row-1.views-row-odd.views-row-first {
display: inline-block;
}
Example Code
<!DOCTYPE html>
<html>
<head>
<style>
.field-content img {
float: left;
padding-right: 10px;
max-width: 100%;
height: auto;
}
.views-row.views-row-1.views-row-odd.views-row-first {
display: inline-block;
}
</style>
</head>
<body>
<div class="view-content">
<div class="views-row views-row-1 views-row-odd views-row-first">
<div class="views-field views-field-title">
<span class="field-content">Up Country</span>
</div>
<div class="views-field views-field-field-book-image">
<div class="field-content">
<a href="/country">
<img src="https://i.stack.imgur.com/9CFdC.jpg?s=48&g=1" alt="Smiley face" width="42" height="42">
</a>
</div>
</div>
</div>
<div class="views-row views-row-1 views-row-odd views-row-first">
<div class="views-field views-field-title">
<span class="field-content">Up Country</span>
</div>
<div class="views-field views-field-field-book-image">
<div class="field-content">
<a href="/country">
<img src="https://i.stack.imgur.com/9CFdC.jpg?s=48&g=1" alt="Smiley face" width="42" height="42">
</a>
</div>
</div>
</div>
<div class="views-row views-row-1 views-row-odd views-row-first">
<div class="views-field views-field-title">
<span class="field-content">Up Country</span>
</div>
<div class="views-field views-field-field-book-image">
<div class="field-content">
<a href="/country">
<img src="https://i.stack.imgur.com/9CFdC.jpg?s=48&g=1" alt="Smiley face" width="42" height="42">
</a>
</div>
</div>
</div>
</div>
</body>
</html>
Hope this is what you are looking for :P
Output screenshot :
Added different image url for each image tag.