I've seen a post on stack overflow kind of answering my question (How to center mat-card in angular materials?)
but the result is really not perfect (see image).
As you can see, the cards get squished, and they're on the same line. No matter the scss I add to the cards, it doesn't affect them. I'd like them to be much bigger, and one on top of the other.
I find it incredible that scss options are not simpler to move your elements where you want...
Add center class to mat-card tag and put below css.
.center {
top : 20%;
height: 40%;
width : 40%;
margin: 0 auto;
display: flex;
}
If this is not apply in scss file then put ::ng-deep just prefix of .center
I tried the answer given in the How to center mat-card in angular materials?, it works
Stackblitz
Related
I'm making my own portfolio using materialize CSS framework and is having some issues. I'm trying to accomplish something like this:
As you can see, the images are properly aligned along with the captions below them, and what I have accomplished so far is this:
How can I possibly do that with materialize css? You can check out the fiddle here: https://jsfiddle.net/uj0ykqpq/1/
Any help would be much appreciated. Thanks!
You can assign a fixed height for the images and to align the captions, use text-align: center I have added a new class so that it doesn't affect other images in card panels.
.technologies .col img {
height: 100px;
}
.technologies .col {
text-align: center;
}
Updated JSfiddle
I am new to bootstrap and web stuff in general. I am having trouble with an application I am developing. What I would like is to have a top bar with buttons that do things and below that a setup where 20% left is filled with a div and the other 80% is filled with a map.
I can get the split using col-md-2 and col-md-10 just fine but the map does not extend to 100% height (I would say it sits about 75%. I have tried many different things offered up here and other places to solve the 100% height but nothing seems to work.
I have put together this in way of an example of what I am currently trying. I stripped away most of the css as none of it was working for me.
http://www.bootply.com/0xx9zBH3Ke
if you can offer assistance I would appreciate it.
**edit
I realized my bootply didnt illustrate my problem very well so I tossed the file at the link below to better show whats going on.
http://ec2-54-186-204-72.us-west-2.compute.amazonaws.com/demo2/bootysample.html
I have tried a couple of solutions but it still fights me by miss aligning things (mostly by placing the leftpane as its own row)
Try adding a 100% height to the html or body elemement. Then wrap your 20-80% width divs in a wrapper div and also set that to 100% height.
here is your solution
Bootply
#row {
display: table;
}
#leftpane, #map {
float: none;
display: table-cell;
vertical-align: top;
}
Maybe you can use like this
.center-element{
min-height: 100%;
min-height: 50vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
Only problem is IE :(
I am working on a landing page, and this is how it looks at the moment: https://a00baa69ca400642fad5c0cead23ef741b6473f7.googledrive.com/host/0B9XEA2QvXeaQZmdGcW1kVk9Kajg/main.html
Here is the wireframe: http://static.squarespace.com/static/52228ba5e4b02da2a90a906c/t/529bc6f9e4b09eb80192c1ae/1385940737162/Good%20Collab.jpg?format=1000w
For the landing page, I was able to get the three photos to align regardless of the width of the viewer's monitor size by setting up max-width and margin to auto.
** Here is the CSS used for the three photos:**
.three-containers {
max-width: 1080px;
margin: auto;
display: block; }
However, I wasn't able to set the section below the three photos to center side by side (i.e. the How it Works part and the form). I tried applying similar code as I did to the three photos - I set a div up for each of them (one div for How it Works and another for the form)
div class="two-texts" for the HOW IT WORKS PART and another div class="two-texts" for the FORM PART
and CSS:
.two-texts {
max-width: 900px;
margin: auto;
display: block;
clear:left;
}
Problem is now the form is aligned under the How it Works part when I actually want it side by side with the How it Works part (see link to wireframe at top).
Can anyone point out what the issue might be? Thanks.
Welcome to StackOverflow!
In HTML, some elements default to stacking horizontally and some vertically. divs are designed to stack vertically by default because they have their display property defaulted to block. Try the following CSS style to see what happens to the three divs with images:
.three-containers > div {
display: inline-block;
max-width: 300px;
}
(the max-width is there because of the images those divs contain)
Similarly, to make the two divs stack horizontally, try the following CSS:
#bodytext, .form {
display: inline-block;
}
Let me know if that helps you get on the right path!
I've been reading various posts on stackoverflow and a few other sites about centering images. I found this code on various sites that seems to be a general guide:
img {
display: block;
margin-left: auto;
margin-right: auto;
}
I am trying to center an image. I can't center it with this code. I can make it move using text-align: center but read this isn't the best method of doing so. I made a jsfiddle. If anyone wouldn't mind helping me it would be appreciated. I was able to make the image move as well by adding a random width value. I don't think this is the right approach though either since I am eyeballing if it is centered or not.
Sorry, I couldn't get the actual image to display but the img logo is there as a placeholder: jsFiddle
Your code should work just fine. There's probably something more you're not showing us. Here's a demo of two methods, though.
Basically, if the img is display: block; you can use margin: 0 auto.
If it's display: inline (the default for an img tag) the parent element would need text-align: center; on it.
Here's some code to summarize: http://jsbin.com/upuzav/1/edit
I would assign your image a class rather that trying to center all images with html. This way if you want to change where its positioned, you can quickly, rather that adjusting all things with the img tag.
CSS:
.center_image {
display: block;
margin-left: auto;
margin-right: auto }
Your Image:
<img src="your_image.jpg" class="center_image">
In order for this trick to work the image must have an explicit width. See http://designshack.net/articles/css/how-to-center-anything-with-css/
I have designed a layout and i find some gaps in the stacking of divs over each other.
can some one help me http://uniquedl.com/3closets/about.html
and
You need this in style.css:
img { display: block }
and you need to change the height on .introduction .intro-message to 384px, to match the height of the image on the left.
Doing this solves both problems.
As an alternative to img { display: block }, you could instead do: img { vertical-align:bottom }. This also fixes.
See this answer for a good explanation of what's going on here.
#Alohci explains it very nicely.
You have a <div class="clear"></div> in both instances there. I would say that the page is behaving as expected.
Edit: If you use Google Chrome to view this page, you can right click on an area and choose "inspect element". It will provide a window that will display the code as it's rendered by the browser, and on the right there will be another properties window that displays the css being assigned to the elements you're looking at.
in their div .introduction you have an image larger than the div itself, this must be the problem, including the other divs
First gap: your class .introduction is having height of 384px where else class .intro-message (which is a child of .introduction) is having a height of 390px.
Hi for your website :http://uniquedl.com/3closets/about.html just make the style like
.introduction {
height: 384px;
overflow: hidden;
position: relative;
}
Then it will work