https://github.com/Yankysamurai/Personal-Website-P5
I am new to posting questions but I am trying to center my text "Welcome to my site" horizontally and vertically. I want it half the distance from the image and from the right margin. I tried display flex but it didn't work.
I just opened a git hub account so I hope you can see the code from the link.
Thank you.
So, the flex container has an img and h2. In order to vertically center the text (relative to the image), you need to set align-items: center;
.about_img_h2 {
display: flex;
justify-content: space-around;
align-items: center;
}
I would suggest using jsfiddle next time, because it makes it easier to review the problem. I created this one (using the GitHub repo you shared) with the fix:
https://jsfiddle.net/13sc4m76/
Let me know if I misunderstood your question and I can take a second look.
you can use the following ways to center elements in a block:
display: flex;
flex-direction: row;
justify-content: center
or
display: flex;
flex-direction: column;
align-items: center
Related
so for responsiveness, I have created a flexbox and placed some images inside but for some reason, I am not able to place all the images in the same line. written below is my CSS code. the container-project is the class for the div in which I am placing all the images and the project-img class is the class for every image placed inside the div.
.container-projects{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.project-img{
width: 25%;
height: auto;
border-radius: 30px;
padding: 20px;
}
I see two issues.
One is that you've set flex-wrap to wrap which means that flex items will wrap onto multiple lines, from top to bottom. Try setting it to nowrap instead.
The second depends on how many images you're trying to put in the line. If it's 4 then you're fine, otherwise you want to change the width: 25%; to a different value as at the moment it will be dividing the width of the containing area in to 4. You might want to look into the flex-basis property instead. It defines the default size of an element before the remaining space is distributed.
Add align-items: center;
.container-projects{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
I'm really new to html and css, so this is my first full attempt at making a nav bar, items in nav bar stuck to the top of the page, please tell me where things went wrong
https://codepen.io/galia-s/pen/GRojmwV
.flex-content {
display: flex;
margin: auto 3.25rem;
align-items: center;
}
Instead of align-content, you might be looking at align-items, depending on what you are trying to achieve. I assume you want to center these items.
So your .flex-content class could look like this:
.flex-content {
display: flex;
align-items: center;
justify-content: space-evenly;
height: 5rem; //set height here instead of header
}
Hope it helps.
You posted way too little information for a reliable answer, but anyway: To get flex-items to stack vertically, you have to add flex-direction: column; to the flex container.
I am using the Vali Admin theme and I am trying to push the last list item in the left sidebar to the bottom.
I have barely used flexbox before so I am not familiar with it at all, but I changed the menu to display: flex and then followed this answer to try to push the last item to the bottom. I am trying to do exactly what the person in that question if after.
These are my modifications to the theme:
.app-menu {
#extend .app-menu;
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: flex-start;
li:last-of-type {
margin-top: auto;
}
}
Working fiddle.
I think the problem is that the menu isn't using as much height as it can.
I would gladly include a working snippet but for the love of my I couldn't figure out how to create a jsfiddle. It doesn't allow local files and it would block my gist. Same with Codepen.
Add the following on .app-sidebar:
display: flex; // make sidebar a flexbox
flex-direction: column; // so it will align column direction
We do the thing above so we can apply flex related styling on the child.
This will make the parent or sidebar a flexbox, then add the following on .app-menu
flex: 1; // this will take all the remaining space on the sidebar
and remove padding-bottom on .app-menu so the last item will stay in the bottom without the padding.
try this
.app-menu {
margin-bottom: 0;
padding-bottom: 40px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: flex-start;
height: 100%;
if last item need to be displayed at the bottom of the page. try by setting height:100% to the ul
It's right to do as it described in link you've attached.
But you didn't set 100% height for your ul.
Setting height: 100%; to .app-menu class solves your problem.
Here is the working example based on your code:
https://jsfiddle.net/zewx18ps/1/
I have added an icon-button to the header description of my mat-expansion-panel, however it has thrown the vertical alignment out of my actual panel header.
Is there a simple way to fix this?
https://stackblitz.com/edit/justify-toggle-button-end-ulgdrt
You can add below code it will take care of vertical alignment
.mat-expansion-panel-header-title {
display: flex;
justify-content: center;
flex-direction: column;
}
I want to vertically and horizontally centre some text in a div that contains to images beside it. So far I've only got it horizontally centred and am having troubling getting it vertically centred. I know there a lots of posts like this and mentioning some absolute positioning but every time I try it everything just overlaps.
Heres the jsfiddle: https://jsfiddle.net/kkae9rzy/
If you expand the result screen horizontally so that everything is on the same line(baseline) you will see that the text is not vertically centred.
Heres the code for my css:
#titleheader{
margin:auto;
text-align: center;
padding:100px;
background:#f2f2f2;
}
#titleheader > h1 {
padding-left: 75px;
padding-right: 75px;
display:inline-block;
font-family: "Bariol_Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #555;
letter-spacing: 3px;
font-size: 50px;
}
#wind{
display:inline-block;
}
#intel{
display:inline-block;
}
I didn't see that anything is "vertically centered" in your version, but I added a vertical-align: middle to the <img> tags (via css) and it looks like that's what you wanted. See the fiddle.
You can use the flexbox layout to achieve this, as well as a few other methods.
Here is the fiddle with the modifications to your CSS to utilize the flexbox method. Pay special attention to #titleheader. https://jsfiddle.net/kkae9rzy/2/
You'll see that I added a few flexbox rules to #titleheader:
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
display: flex; tells #titleheader to use the flexbox display layout.
(See http://dev.w3.org/csswg/css-flexbox/ and https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for more info on flexbox)
align-items: center; is telling #titleheader to align all of its children to the center of the cross axis (for our demo, the X axis, so it's vertically centering them).
justify-content: center is telling #titleheader to align all of its children to the center of the main axis (for our demo, the Y axis, so it's horizontally centering them).
flex-wrap: wrap is telling #titleheader to wrap child elements onto a new line instead of forcing them to be all on the same line, regardless of how much screen space is available.
Flexbox is an extremely powerful tool. It's rapidly gaining in browser support and I suspect we will be able to start using it without too many polyfills soon.
Here is the current support for flexbox: http://caniuse.com/#feat=flexbox
To ensure the widest variety of support when using flexbox, make sure you include all vendor prefixed versions of the flexbox declarations I mentioned above. This can be achieved using a tool like autoprefixer (https://github.com/postcss/autoprefixer) which adds all the necessary vendor prefixes to your CSS when compiled.
Including all of the vendor prefixes for the attributes I mentioned above would look something like this:
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
This should work
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);