This question already has answers here:
Center aligning a fixed position div
(16 answers)
Closed 1 year ago.
I would like to make a position: fixed; header centered to the screen with a dynamic width and height. Right now, on desktop it is centered fine with this solution:
const Container = styled.div`
position: fixed;
left: 50%;
transform: translateX(-50%);
width: auto;
`;
I found that solution here. The problem I have is that if you enter my website, and make the window narrower, the header also gets smaller, and the menu items run out of space. I want to have width: auto; because I want the header to be just as wide as the menu and logo, even if I add or remove menu items, and I don't want to manually change the width every time I do that.
Can anyone think of a way to solve this?
Try to add this:
align-items: center;
justify-content: center;
I don't really know the reason for the width auto because that will just make the width the width of the child elements.
Related
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 5 years ago.
In my code there could be hundreds of elements depending on how much images is added to the pages, meaning the height of the page could be between 0 to 1000s or even more.
How would I center a overlay div in the middle of the page. The webpage is more or less trying to mimic Instagram, you can have hundreds of images but once you click on one of them the overlay is still set in the middle of the page.
This is the main div for the overlay of the images. this div works fine as long as the page is no longer than the view height of the page, if the height is too large that you have to scroll down, then it will mess with the position of the vertical. I know this problem is because im setting the bottom to 15% so it takes in consideration the entire height value. But I dont know how I can fix that.
.overlayImgContainer{
position: absolute;
height: 70%;
width: 120%;// (page is set to 960px this add a bit more room)
z-index: 1;
bottom: 15%;
left: -10%;
background-color: rgba(0,0,0,0.5);
overflow-x: hidden;
border-radius: 5px;
text-align: center;
}
You can use flexboxes for that.
CSS
.wrapper {
display: flex;
align-items: center;
justify-content: center;
}
HTML
<div class="wrapper">
<div>...</div>
</div>
I'm trying to make a navbar on my site that contains 5 links, but one of them is an image that is in the middle of the group. You can look at the JSFiddle of what I have here: http://jsfiddle.net/kylerm42/fgtLv/4/. I have my header set at 40px tall and am trying to get all the text links centered vertically within the div. The image is taller than the div and should be at the top, with the bottom hanging over.
I've tried vertical-align, line-height set to the height of the div, display: flex; align-items: center;, and anything else I could find online, but nothing works. I've also tried taking the image out of the rest of the header div, and then move it up 40px using position: relative, and that made it look correct visually, but the image's div was covering up the rest of the links, making them unclickable. Any idea how to get this working like it should? Thanks!
You've tried everything but not position: absolute; which is an appropriate way to go for.. In the snippet below, I used left: 50%; to first position the logo in the center but still it isn't centered, so I negated 1/2 the size of the image which is 75px in width so I used -38px
Demo
img#logo-nav {
max-width: 75px;
position: absolute;
left: 50%;
margin-left: -38px;
}
I'm creating a chat application and need to align messages from users the way is done in Skype, from bottom to top.
A solution was found here,
but it has couple of flaws.
the height of container is a fixed height, I need to cover all available height of the window (if I use height: 100%, it shrinks completely).
The height of the message item is fixed, I need it to adjust to its content height.
Having a poor experience with CSS I'm having troubles to fix these 2 issues.
Can someone point to a solution?
It could be easier if you have provided your own jsfiddle. But anyway, I'm trying to answer your question by taking #IlyaStreltsyn jsbin.
You can position to be fixed and set vertical-align bottom and apply the gap from bottom. Here I have used 0px for demonstration.
.wrapper {
display: table-cell;
vertical-align: bottom;
position: fixed;
bottom: 0;
right: 0;
width: 300px;
}
jsfiddle demo
I'm building a responsive website, and I have a div (named 'wrapper'), that I want to be in the center of the page at all times. I figured out how to center it horizontally, because I have a set width percentage. How would I center this vertically, if I DONT have a set height percentage?
.wrapper{
width: 50%;
height: auto;
margin-left: 25%;
padding: 3%;
}'
Try this tutorial
Centering div vertically and horizontally
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
Try this jQuery plugin: TailorFit
and check out the demo.
One way you could use it would be like this:
$('#your-div').tailorfit();
Because your height is auto, that alone should do the trick.
Full disclosure - I'm the author of the plugin.
I want to upgrade my website's template.
I want the content to be in a fixed width centered div. This is not a problem and there are many examples on the web.
Since I have already content with text & tables, I want to make sure that the div will not cut the content of some pages.
I don't want to use Javascript to adjust the width.
Is there a way to do this with a div or should I use table instead?
Not getting your question right, centered as in vertically too? If you want it vertically centered than you need to use position: absolute; and if you want it horizontally centered you just need to use margin: auto;, as simple as that...
/* Totally center fixed width content */
.center {
position: absolute;
top: 50%;
left: 50%;
margin-top: /* Half of the total height of the container div */
margin-left: /* Half of the total width of the container div */
}
If you need the content horizontally centered, you need to use
.horizontal {
margin: auto;
}
Content won't be cropped unless and until you use a fixed width div and overflow: hidden; at the same time