I have the following html code:
<div><p>Recollida</p></div>
<div ng-repeat="image in images">
<a ng-href="{{image.path}}" class="imageAnchor">
<figure>
<img ng-src="{{image.path}}" alt="">
</figure>
</a>
</div>
Now I want to display the images in rows of 4, and I want every row to have the same height.
I've been struggling with this for a while and I want to know if there is any way to achieve this or if it's better to look for another solution. The <div> in the code above is originaly inside a larger <div> with a determined height.
Try this using flex
<div class="imagesContainer">
<div ng-repeat="image in images" class="imageContainer">
<a ng-href="{{image.path}}" class="imageAnchor">
<figure>
<img ng-src="{{image.path}}" alt="">
</figure>
</a>
</div>
</div>
.imagesContainer{
display:flex;
width:100%;
}
.imageContainer{
width:25%;
}
http://jsfiddle.net/Lsp2f5hk/
Read more about flex here : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Related
How to show several images in one div using css and html?
Ex: https://www.awesomescreenshot.com/image/3066306/6f04718aa19dcc4b88192304a0f9a307 .
Here what I have done so far:
<body>
<div class="deck">
<img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/kXlrGioGfFKOvibpsPzzGx16cP2.jpg" alt="testimage">
<img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/zzfwhweu5reCv2Loqzon7Q5WAd5.jpg" alt="testimage">
<img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/sGuZHYvu0mXeQCwvJ5yzk2Yoytq.jpg" alt="testimage">
<img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/4Ar01t6sW1ZZBcbz2R1wqjzIBdr.jpg" alt="testimage">
</div>
</body>
https://jsfiddle.net/wa9gfgvz/
Can you try this?
.deck{
display:block;
width:100%;
}
.deck img{
width:50%;
float:left;
}
Refer: JSFiddle
Separate the images in two different divs and put that divs inside a main div, then if you want, you can center the ContainerDiv or do whatever with that, and the content will be always two images per row. But I suggest to use bootstrap to this kind of feature, but, anyways, here it come:
<div class='ContainerDiv'>
<div class="deck">
<img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/kXlrGioGfFKOvibpsPzzGx16cP2.jpg" alt="testimage">
<img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/zzfwhweu5reCv2Loqzon7Q5WAd5.jpg" alt="testimage">
</div>
<div class="deck">
<img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/sGuZHYvu0mXeQCwvJ5yzk2Yoytq.jpg" alt="testimage">
<img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/4Ar01t6sW1ZZBcbz2R1wqjzIBdr.jpg" alt="testimage">
</div>
</div>
CSS:
.deck{
display:flex;
}
Fiddle: https://jsfiddle.net/prtanruz/
I'm using bootstrap grid as shown below and I'm trying to centralize some divs. ( pic). I've tried everything {margin:0 auto; width:50% } etc etc but I can't work it out. It can't be that difficult to centralize some divs. What's the problem here? Please don't mark it as a duplicate. I've been researching the whole day, I just can't work it out.
Thank you
<header data-spy="affix" id="myHeader" class="container row">
<div class="col-sm-4 ">
<div class="centralize">
<a href="http://www.facebook.com" target="_blank">
<img class="logos" src="images/facebook.png" onmouseover="zoomin(this.id)" onmouseout="zoomout(this.id)">
</a>
<a href="http://www.twitter.com" target="_blank">
<img class="logos" src="images/twitter.png" onmouseover="zoomin(this.id)" onmouseout="zoomout(this.id)">
</a>
<a href="http://www.instagram.com" target="_blank">
<img class="logos" src="images/instagram.png" onmouseover="zoomin(this.id)" onmouseout="zoomout(this.id)">
</a>
</div>
</div>
<div class="col-sm-4">
<div class="centralize">
//Other Stuff to be centralized
</div>
</div>
<div class="col-sm-4">
<div class="centralize">
//Other Stuff to be centralized
</div>
</div>
</header>
Actually with {margin:0 auto; width:50%} it should work.
But in your code I see that you are using the .col-sm-4 class on the parent div that only takes 1/3 of the width. It might work with .col-sm-12 instead that takes 100%
To center align the content within the class="centralize" divs, use:
.centralize {
text-align: center;
}
I have a three column layout and one of them is like -
<div class="column one-second product_image_wrapper">
<div class="images">
<div class="image_frame scale-with-grid" ontouchstart="this.classList.toggle('hover');">
<div class="image_wrapper">
<a href="#" itemprop="image" class="woocommerce-main-image zoom" title="Sumanji Kamphy" data-rel="prettyPhoto">
<div class="mask">
</div>
<img width="250" height="250" src="#" class="scale-with-grid wp-post-image" alt="Sumanji Kamphy" title="Sumanji Kamphy">
</a>
<div class="image_links">
<a href="#" itemprop="image" class="woocommerce-main-image zoom" title="Sumanji Kamphy">
<i class="icon-search">
</i>
</a>
</div>
</div>
</div>
</div>
</div>
I want to center this image both vertically and horizontally currently it looks something like this -
Can someone tell how to do this ?
Assuming that you want to put it in center with relative to the div with class image_frame , the following code will work.
.image_frame{
position:relative;//makes the outer div as relative, thus you can use which if you want some other div
}
.image_frame img{
position:absolute;
top:50%;
left:50%;//brings the edge of image to exact center both horizontally and vertically
margin-top:-125px;
margin-left:-125px;//Now pushing it half of images width and height in your case it is 250px so -125px is good for pushing the image to exact center.
}
I want to make 5 or 6 divs that will contain an image and some static text. However, I want to alternate which side of the div the image is on. So the first div it would be on the left, the next one on the right, and so on.
Is it best to generalize them all into a class, and then hash out the differences inside that class? Or should I just create two different classes which would easily solve the problem but make the code a bit harder to maintain? Is there a generally accepted way to handle these sorts of things?
I have tended to handle this sort of thing by creating two separate classes, but I'm not sure that this is the best way to do it and I'm wondering if there are better ways to approach the problem.
Try some CSS like this:
section > div:nth-of-type(odd) > img {
float:left;
}
section > div:nth-of-type(even) > img {
float:right;
}
... and HTML like this:
<body>
<section>
<div>
<img src='xxx.png'>
<p>Text</p>
</div>
<div>
<img src='xxx.png'>
<p>Text</p>
</div>
<div>
<img src='xxx.png'>
<p>Text</p>
</div>
</section>
</body>
I would use :nth-child to specifically target a class.
You can alter the code to your preferences by checking this: NthMaster
.item:nth-child(even) > span {
float: left;
}
<div class="container">
<div class="item">
<img src="http://placehold.it/50x50">
<span>Text</span>
</div>
<div class="item">
<img src="http://placehold.it/50x50">
<span>Text</span>
</div>
<div class="item">
<img src="http://placehold.it/50x50">
<span>Text</span>
</div>
<div class="item">
<img src="http://placehold.it/50x50">
<span>Text</span>
</div>
<div class="item">
<img src="http://placehold.it/50x50">
<span>Text</span>
</div>
<div class="item">
<img src="http://placehold.it/50x50">
<span>Text</span>
</div>
</div>
I want to display several images next to each other and each image has a date below it. The date is wider than the image and I would like to center the image on top of the date. Here's a code snippet
<div style="float:left">
<div class="newsfeed_photo">
<a href="...">
<img alt="Small" class="photo_thumb_frame" src="..." />
</a></div>
<div class="newsfeed_date">
(08/17/11 03:29pm)
</div>
</div>
<div style="float:left">
<div class="newsfeed_photo">
<a href="...">
<img alt="Small" class="photo_thumb_frame" src="..." />
</a></div>
<div class="newsfeed_date">
(08/22/11 02:16pm)
</div>
</div>
If I'm understanding you right, you should just be able to use text-align: center:
http://jsfiddle.net/rahjU/
To shift your image Before other content (visually)
.img {
order: -1;
}
W3