I am trying to add some small .png icons in a horizontal row in a main container. I am struggling to figure out the easiest way to go about doing this
Here is a code sandbox of what I have created so far
https://codesandbox.io/s/broken-dew-76c4rf
I have been struggling with this for a while now and I cannot seem to get it. I have tried creating a div, inserting tags in the div but I don't think this is correct. Any help is greatly appreciated!
Do like this
First import the img_path at the top
import imgurl1 from "../public/img/aws.png";
import imgurl2 from "../public/img/c.png";
import imgurl3 from "../public/img/java.png";
Then define a div with style flex flex-direction:row like this
<div className="img-container">
<div className="img">
<img src={imgurl1} alt="aws" />
</div>
<div className="img2">
<img src={imgurl2} alt="c" />
</div>
<div className="img3">
<img src={imgurl3} alt="java" />
</div>
</div>
and style like this
.img-container {
display: flex ;
flex-direction: row ;
}
.img1, .img2 ,.img3 {
/* any style for the images */
background-color: black;
}
Just set the style from the div with the images to display: 'flex', flex-direction: 'row'
Related
I have a react component and I would like to display inline-block 3 photos in a row with it's names under each photo, and every next 3 elements under (in new row) and so on...
I think I need to use something with:nth-child(3n+1) but something goes wrong...
const Photos=(props)=>{
return(
<div className="photos-list">
<img className="photo-img"
src={props.memoriesPath}
alt={props.memoriesName}
/>
<div className="photo-name">{props.memoriesName}</div>
</div>
)
}
export default Photos
Could you please tell me how should css look like?
wrap all photos components in a div then style div with grid box like this:
<div classname="parent">
<Photos />
<Photos />
<Photos />
</div>
and css:
.parent {
display:grid;
grid-template-columns:auto auto auto;
}
I've been trying to get the images to center on the page. I tried justifying the content in the center and also aligning items in the center but neither works. Neither does margin auto (which usually does work). I tried setting similar stylings for the div containing the image but still no change. I know I can add margins but causes and issue when I set the background color of the page so I'd like a different solution. Let me know if you have any ideas, thanks!
<ngb-carousel *ngIf="images" [showNavigationArrows]="showNavigationArrows" [showNavigationIndicators]="showNavigationIndicators">
<ng-template ngbSlide *ngFor="let image of images">
<div class="picsum-img-wrapper">
<img [src]="image" alt="Random slide">
</div>
</ng-template>
</ngb-carousel>
img {
width: 50vw;
height: 80vh;
margin-left: auto;
margin-right: auto;
}
Wrap your carousel inside a div with display flex. Something like this.
<div class="carouselCont">
<ngb-carousel *ngIf="images" [showNavigationArrows]="true" [showNavigationIndicators]="true">
<ng-template class="imageSlider" ngbSlide *ngFor="let image of images">
<div class="picsum-img-wrapper">
<img [src]="getImageLink(image)" alt="Random slide">
</div>
</ng-template>
</ngb-carousel>
</div>
The css style of carouselCont class applied shall be
.carouselCont{
display:flex;
flex-direction:row;
justify-content:center;
align-items:center;
height:100vh;
}
This way your carousel shall be aligned to center of the screen horizontally and vertically. No need to give vh/vw or margins to image itself for the sole purpose of aligning carousel in center (this way your images shall get stretched /shrinked in different screen resolutions)
Thanks.
I am using Wordpress (Divi theme page builder) and I'm trying to use flexbox css to horizontally align two image modules each in a separate column within a row, so that one appears on the left and one appears on the right.
I've added custom CSS to the row: 'display: flex; justify-content: space-between' which works for the left image module, but the right image is not being pushed fully to the right.
See the image below for an example. I've tried fiddling about with many settings but nothing is helping.
Example of Problem
The page is currently private on my website (www.mistyricardo.com) but if needed I can make it public for inspection.
Thank you in advance.
following...
Check and apply according to your markup
If the 'Currey at home - Volume 1' and 'Currey at home - Volume 2' books are in the same container:
.book-wrapper {
display: flex;
justify-content: space-between;
}
/* this is for demo only - ignore the below */
img {
height: 150px;
}
<div class="banner-header">
<div class="book-wrapper">
<img src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1548876269l/43791788._SY475_.jpg" />
<img src="https://upload.wikimedia.org/wikipedia/en/f/f4/Gangsta_Granny_Cover.png" />
</div>
</div>
If the 'Currey at home - Volume 1' and 'Currey at home - Volume 2' books are not in the same container:
.banner-header {
display: flex;
}
.book-img {
margin-left: auto;
}
/* this is for demo only - ignore the below */
img {
height: 150px;
}
<div class="banner-header">
<div class="book-wrapper">
<img class="book-img" src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1548876269l/43791788._SY475_.jpg" />
</div>
<img class="book-img" src="https://upload.wikimedia.org/wikipedia/en/f/f4/Gangsta_Granny_Cover.png" />
</div>
html
<div class="xxx">
<div class="xyz" ng-repeat="item in formList">
<div ng-show="formList.indexOf(app)!= -1" class="added-item">
<img class="col-md-6 added-item-icon" ng-src="app.iconFile"/>
</div>
</div>
<div class="abc" ng-hide="formList.length>20">
<button class="btn" ng-click="addItem()">
Add<i class="glyphicon glyphicon-plus"></i>
</button>
</div>
</div>
css
.xxx {
width:500px;
height: 80px;
}
.added-item-icon, .abc {
width: 50px;
height: 50px;
}
I'm not good in css, and have only very basic knowledge
I am trying to add some list of items in a horizontal tab of height 80 and width 500 pixels, also an add app button too
As per the code, the add app button disappear when we add the 20th app
what I need to do is, lets say the xxx div(horizontal div) can have 5 items, after which overflow occurs
I want to set the overflow horizontal, not vertical
also at that stage(when 5 items are added), I want to fix the add app button at the very right of the division xxx, and the scroll due to overflow should not affect that button, it should be fixed there
we doesn't need to care more about the size of the item icons or add button,
Please help
For this you'll want to look into using flexbox. To get this working, all you really need to do is add display: flex; flex-direction: column to your container, and then overflow-y: auto to the section you want to scroll.
Heres a Plunker demonstrating it.
I'm using twitter bootstrap. It has collapse module.
I'm using it like this.
<a class="dropdown" style="float: right;" href="#collpasediv" data-toggle="collapse"> Collapse </a>
This is the collpasediv
<div id="collpasediv" class="collapse in">
<div class"circlecount">
1
</div>
<div class"content">
Some text goes here
</div>
</div>
I would like to move half of the circle of circlecount outside the collapsediv.
By default bootstrap applies overflow:hidden attribute for collapsediv.
I tried by applying overflow:visible for both collpasediv and circlecount. But collapse not working properly. Can anyone help me to fix it? Thanks
PS: Circlecount div is just to display numbers with some circled background image. I want the half of the circle outside collpasediv and half of the circle inside collapsediv.
Thanks
In the stylesheet for the twitter bootstrap there is the following declaration:
.collapse.in { height: auto; }
Add to it like this:
.collapse.in { height: auto; overflow: visible; }
Or overload it by adding a new declaration like this (leave the other declaration untouched in the bootstrap - this makes updating in the future easier):
.collapse.in { overflow: visible; }