This should be so simple, but I cannot figure it out...
http://www.coelandscapes.co.uk/ is a quite an old site, with a simple CMS. I'm trying to get the menu to vertically align with the bottom of the logo, but can't use absolute (because the number of elements might change).
Does anyone have any ideas?
Thanks
flexbox is great for vertically aligning items. Add this to your #menu style:
#menu {
display: flex;
flex-wrap: wrap;
align-content: flex-end;
width: 610px;
height: 245px;
padding: 0 0 0 12px;
}
You might have to add some vendor prefixes depending on what browser you want to support: http://caniuse.com/#search=flex
Just put position:relative on the parent and the child should have this css:
position: absolute;
top: 50%;
transform: translateY(-50%);
Related
I'm trying to make a sticky navbar. So i'm adding the position: fixed; and width: 100%. It's working but scrollbar looks bad. This is the code;
.navbar {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
padding: 14px 24px;
position: fixed;
top: 0;
When i'm adding width: 100% and position: fixed; scrollbar section is breaks up like this;
Look like this
Should look like this
How can i solve this?
That's really simple. The answer is: it's the padding. as you might know by now, padding is some pixels that get added to an element after its normal dimensions and before the border. For example:
So when you set width to 100% the padding overflows your page. You need to set your width to 100% - (padding * 2). Padding is *2 because there is one in the left and one in the right. This can be acheived with the calc() function of CSS.
.yournavbar{
/*Style here*/
padding: 8px; /*Set this to anything*/
width: calc(100% - calc(8px * 2)); /*You have to set 8 px to your padding*/
}
Example image:
Did this solve your error? Do you want more information (for margin and border)? Comment me.
Its looks like your padding is pushing your content way after the 100% size. Try using box-sizing: border-box; and check out this documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
Simple fiddle : https://jsfiddle.net/75zwpy3b/2/
The navbar is styled as
#navbar {
background-color: #333;
display: flex;
justify-content: space-between;
align-items: center;
height: 70px;
/* width: 100%; */
position: fixed;
}
As you can see the width has not been applied but position:fixed is applied, the navbar contracts to fit its content, but if i comment out position:fixed then suddenly the navbar goes all the way from left to right.
Why does position:fixed requires width:100% to go with it ?
Since it´s fixed it doesn't know of its parent elements or siblings so it just fits the width to its contents. One solution is to go width: 100% or left: 0; right: 0;
Since you are setting a fixed position it needs a height and width property since there are no other defined elements to go off of. If you want the nav to scale across the screen then use width: 100% but if you wanted a specific fixed nav size you could do width: 800px.
I am working on a website: http://felipewarrener.55freehost.com
As you can see there is a content slider, I've added media queries to make the text smaller and the boxes scale in width (I will eventually make the text small enough so that it wont make the boxes bigger than the containter div.
However, I don't know how I can vertically center these boxes? When I scale it down they will need to be vertically centered or else they will just float down.
They are positioned relatively as i felt that was the best option
Could anyone suggest or tell me what method I should use?
Thanks for taking the time to read
Felipe
you can use flex
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
align-content: center;
width: 400px;
height: 400px;
border: 1px solid black;
}
.content {
width: 200px;
height: 200px;
background-color: green;
}
<div class="container">
<div class="content">
</div>
</div>
If you're talking about your "A new dimension to colouring PVC",
What you could do is have the header container be relatively positioned, and then give your text this class:
.vert-centered{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Pretty sure your text is floating down to prevent overlap though. You might as well just hide it when the screen width gets too small.
I am trying to vertically center a header element in my nav element, and I tried to calculate the height of the <h1> using this CSS:
.navbar {
display: table;
width:90%;
height: 3em;
background-color: #7f8c8d;
border-radius: 10px;
.nav-title {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.nav-dropdown {
display: table-cell;
vertical-align: middle;
text-align: center;
}
}
It worked, and I don't understand how. I was also wondering if there were any better ways to center an element vertically. TL;DR: How does this work? What are other ways to accomplish what this code accomplishes.
This works because you are setting the display to table and table-cell. Table cells natively allow for vertical centering.
Without using tables you still have lots of other options (though none of them seem to be as simple).
CSS-Tricks has a handy writeup of various centering methods.
See it as a table, you create a table cell of your .nav-title. You are able to vertically align them, that's how it works.
Are there any easy ways to center vertically? A few, but in a lot of occassions some of them don't work.
Here is one:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
I've got a menu that appears on hover over an absolutely positioned div. All of the menu items have to be relatively positioned because the absolutely div will appear multiple times on a page and will appear in multiple sizes in one instance.
How would I center multiple items with position: relative both vertically and horizontally when I won't know the the size of the parent div?
I know the position: absolute trick with negative margins, but this situation calls for something different.
Here's the code:
.OuterCase {
position : absolute;
width : 100%;
height : 100%;
text-align: center;
}
.InnerItem {
width : 38px;
height : 38px;
display: inline-block;
}
I've got it to center the items horizontally; it's getting the vertical that's being a bit elusive.
Much simpler:
position: relative;
left: 50%;
transform: translateX(-50%);
You are now centered in your parent element. You can do that vertically too.
Alternatively, you may also use the CSS3 Flexible Box Model.
It's a great way to create flexible layouts that can also be applied to center content like so:
#parent {
-webkit-box-align:center;
-webkit-box-pack:center;
display:-webkit-box;
}
If you have a relatively- (or otherwise-) positioned div you can center something inside it with margin:auto
Vertical centering is a bit tricker, but possible.
You can use calc to position element relative to center. For example if you want to position element 200px right from the center .. you can do this :
#your_element{
position:absolute;
left: calc(50% + 200px);
}
Dont forget this
When you use signs + and - you must have one blank space between sign and number, but when you use signs * and / there is no need for blank space.
Another option is to create an extra wrapper to center the element vertically.
#container{
border:solid 1px #33aaff;
width:200px;
height:200px;
}
#helper{
position:relative;
height:50px;
top:50%;
border:dotted 1px #ff55aa;
}
#centered{
position:relative;
height:50px;
top:-50%;
border:solid 1px #ff55aa;
}
<div id="container">
<div id="helper">
<div id="centered"></div>
</div>
<div>
.parent {
width: 100%;
height: 30vh;
display: flex;
justify-content: center;
align-items: center;
}
.child {
position: relative;
height: 20vh;
display: flex;
justify-content: center;
align-items: center;
}
Just make sure the height of the parent is greater than the height of the child.
An other simple solution I did not yet see here:
.parent{
display: flex;
flex-direction: column;
height: 40vh;
width: 40vw;
}
.child{
margin:auto;
}