i have code html using angular material library:
<div layout="row" layout-wrap style="background: yellow; ">
<div ng-repeat="pro in Products" >
<md-card class="cardProduct" >
<img ng-src={{pro.Image1}} class="md-card-image imageProduct">
</md-card>
</div>
</div>
it shows: enter image description here
I want it align center, and the fourth image is in the left, not center.
Thank you so much.
Since you are using angular material you can easily do this with flex-box
It will help if there are more images to come
Change your html code as
HTML:
<div layout="row" layout-wrap style="background: yellow; ">
<div class="prod-container" ng-repeat="pro in Products" >
<md-card class="cardProduct" flex="30" >
<img ng-src={{pro.Image1}} class="md-card-image imageProduct">
</md-card>
</div>
</div>
CSS:
.prod-container{
display: flex;
flex-wrap: wrap;
justify-contents: flex-start;
}
you can also give css for the cards by removing flex=30 from the html code
<md-card class="cardProduct">
and the CSS will be
.cardProduct{
min-width: 30%;
flex: 1;
}
Make the parent container (layout="row") have the css property:
text-align: center;
And the ng-repeated containers have the property:
display: inline-block;
and in case you have any text for those containers might want a:
text-align: left;
just make the text-align property of the parent of the images to center.
text-align:center;
Related
I've created an image gallery but I am unsure about how to center the images in the middle of the page horizontally and vertically.
<div class="gallery">
<a target="_blank" href="Icon_pyro.jpg">
<img src="Icon_pyro.jpg" alt="Pyro" width="256" height="256">
</a>
<div class="desc">Pyro</div>
</div>
With my CSS classes being
div.gallery {
display: block;
margin: 0 auto;
text-align: center;
}
div.gallery img {
margin: 5px;
}
It shows up stacked on top, I am stumped on how to make them side by side
Current webpage
You can use display:flex property to fix your problem.
I will give you some Idea........................
horizontally center
if you use display:flex; all div elements are show as row. Then if you use justify-content:center; you row element will be center horizontally.
.html
<div class="imageContainer">
<div class="img">
<img src="https://via.placeholder.com/256x256">
</div>
<div class="img">
<img src="https://via.placeholder.com/256x256">
</div>
<div class="img">
<img src="https://via.placeholder.com/256x256">
</div>
</div>
.css
.imageContainer{
display:flex;
justify-content:center;
}
.img{
margin:5px;
}
jsFiddle example
Vertically center
You have to only add align-items: center; and min-height: 100vh;
.imageContainer{
display: flex;
align-items: center;
min-height: 100vh;
}
jsFiddle Example
horizontally and vertically Center.
just add (here has both above css propertise. have a look and get the idea)
.imageContainer{
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
}
jsFiddle Example
As well as check following example it will show you how to center columns items vertically and horizontally (just added flex-direction:column;)
.imageContainer{
display:flex;
align-items:center;
min-height:100vh;
flex-direction:column;
justify-content:center;
}
jsFiddle Example
Here is the tutorial if you want to follow and get some idea about flex
Can you please check the below code? Hope it will work for you.
You have to add one parent element for all the gallery elements and give flex utility property to that parent. You need to set the height of gallery parent element as per requirements (currently, we have set viewport height for the below demo).
Please refer to this link: https://jsfiddle.net/yudizsolutions/b2fq8dhr/
It sounds like you will want to wrap the images using flex to get them side by side.
In that case, I would create a gallery-wrapper div that wraps around all of your gallery divs. You can style the gallery-wrapper to get flex, which will make it's children side-by-side by default. Also, add justify-content: center, to center things horizontally. Check out this jsFiddle / my updated answer, and consider learning more about Flexbox styling - it's the best.
.gallery-wrapper {
display: flex;
justify-content: center;
}
<body>
<div class="gallery-wrapper">
<div class="gallery">
<a target="_blank" href="Icon_pyro.jpg">
<img src="Icon_pyro.jpg" alt="Pyro" width="256" height="256">
</a>
<div class="desc">Pyro</div>
</div>
<div class="gallery">
<a target="_blank" href="Icon_scout.jpg">
<img src="Icon_scout.jpg" alt="Scout" width="256" height="256">
</a>
<div class="desc">Scout</div>
</div>
<div class="gallery">
<a target="_blank" href="Icon_spy.jpg">
<img src="Icon_spy.jpg" alt="Spy" width="256" height="256">
</a>
<div class="desc">Spy</div>
</div>
<div class="gallery">
<a target="_blank" href="Icon_soldier.jpg">
<img src="Icon_soldier.jpg" alt="Soldier" width="256" height="256">
</a>
<div class="desc">Soldier</div>
</div>
</div>
</body>
I have a problem.
I would like make a pdf, but I can not to make a simple flex and items-center on different height divs.
<div style="margin-top: 20px; align-items: center">
<div style="width: 70%; display: inline-block; text-align: right">Client: </div>
<div style="width: 25%; display: inline-block; font-size: x-large" >Company shorted name</div>
</div>
Okay, your problem is not really related to either Laravel nor DomPdf (Will adjust your tags :-)).
This is however how you get the 2 elements centered; The center is exactly between the 2 child DIVs, so you might want to adjust that with giving them a certain size, istead of auto.
<div style="margin-top: 20px; display: flex; justify-content: center;flex-direction: unset;width: 100%;align-items: center;">
<div style="flex: 1;display: inline-block;text-align: right;">Client: </div>
<div style="flex: 1;display: inline-block;font-size: x-large;">Company shorted name</div>
</div>
As reference you should have a look at this article https://love2dev.com/blog/absolute-centering-css/
I'm trying to center two div Horizontally, and align one at the Middle of the parent container, and the second one at the Bottom of the parent container. I'm using Foundation 6, with the Flexbox version.
Html
<section id="hero">
<div class="row align-middle align-center">
<h1>Welcome</h1>
</div>
<div class="row align-bottom align-center">
<p>Some text</p>
</div>
</section>
Css
#hero {
height: 100vh;
display: flex;
flex-wrap: wrap;
}
The problem is that every div in the flex container (#hero) appear on the same line.
Thank's for helping !
Pretty sure you have to add the class column to the sub element of row like so:
id="hero">
<div class="row align-middle align-center">
<h1 class="column">Welcome</h1>
</div>
<div class="row align-bottom align-center">
<p class="column">Some text</p>
</div>
</section>
I finally found how to align vertically 3 divs using a Flexbox. Foundation wasn't really in the problem.
I made a Js Fiddle for those who have the same question:
.wrapper {
display: flex;
flex-direction: column;
height:90vh;
}
.center {
width: 100%;
flex-grow: 1;
align-items: center;
display:flex;
}
.a {
width: 100%;
}
<div class="wrapper">
<div class="a">Header</div>
<div class="center">Body</div>
<div class="a">Footer</div>
</div>
JSFiddle: https://jsfiddle.net/ek38ff5r/20/
Most of the things I create I need centered, but able to scale if necessary, so I use a table layout to help center content as I've done for years. However, wit the introduction of flex I believe this has been made more efficient ( less html ). I've done some research but haven't gotten to a proper cross-browser solution in the time alloted.
So very simply, I need to replace the following code:
<style>
.app-frame {position:fixed;top:0;left:0;width:100%;height:100%;}
.app-frame td {vertical-align:middle;text-align:center;}
.app-content {display:inline-block;border:1px solid gainsboro;max-width:600px;position:relative;}
</style>
<table class="app-frame">
<tr>
<td>
<div class="app-content">
<!--app-->
<div class="slide" id="slide1">
<h1>Step 1: Name your character.</h1>
<p class=info>You can change this at any time after creation.</p>
<label>Character's Name</label>
<input name="charname" />
</div>
<!--/app-->
</div>
</td>
</tr>
</table>
with a solution that allows me to use divs, like so:
<div class="app-frame">
<div class="app-content"> ... </div>
</div>
These are the settings (for the container element) with which you can center all included elements vertically and horizontally using flex:
.slide {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.slide {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
<div class="app-frame">
<div class="app-content">
<div class="slide" id="slide1">
<h1>Step 1: Name your character.</h1>
<p class=info>You can change this at any time after creation.</p>
<label>Character's Name</label>
<input name="charname" />
</div>
</div>
</div>
This is how to horizontally center a div with css flexbox:
.app-frame{
display:flex;
justify-content:center;
align-items:center;
width:100%
}
<div class="app-frame">
<div class="app-content">Centered DIV</div>
</div>
It's more flexible as you can change your layout without touching the HTML.
I'm trying to make a grid with some icons and their respective id.
For example, I have this code using bootstrap:
.flex {
display: flex;
align-items: center;
height: 200px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
rel="stylesheet" />
<div class="row flex">
<div class="col-md-2">
<img src="http://placehold.it/300x300" alt="" class="img-responsive">
<p class="text-center channel-number">2</p>
</div>
<div class="col-md-2">
<img src="http://placehold.it/300x100" alt="" class="img-responsive">
<p class="text-center channel-number">4</p>
</div>
<div class="col-md-2">
<img src="http://placehold.it/300x400" alt="" class="img-responsive">
<p class="text-center channel-number">11</p>
</div>
</div>
now the number will just stay right under the image, but I want the number to be horizontally align with the other numbers and centered below the image.
How can I do this?
Using flex or does bootstrap has a way of doing this?
Thanks!
Fiddle
Try this:
HTML (no changes)
CSS
.flex {
display: flex;
min-height: 200px;
}
.flex > .col-md-2 {
display: flex; /* create nested flex container */
flex-direction: column; /* stack children (image and number) vertically */
}
img { margin: auto;} /* forces numbers to bottom edge of container */
Revised Fiddle
Learn more about justify-content and auto margins here:
Methods for Aligning Flex Items