I am creating a calendar and the header contains in it the names of the days of the week (su, mo...). The calendar itself scrolls while I want the header to stay fixed. This part has been simple enough using position fixed or making the calendar div contain the scroll bar.
The big issue I have is that I centered both the dates and the days of the week and the scrollbar is making the center different on the header and the content. The only workaround I found to this was to remove the scrollbar entirely, but I want the scrollbar to be visible. Is this possible?
Thanks in advance
.wrapper {
width: 100%;
.header {
position: fixed;
width: 100%;
.header-wrapper {
padding-left: 50%;
transform: translateY(-50%);
}
}
.content {
padding-left: 50%;
transform: translateY(-50%);
}
}
Here is a watered down example of my issue: https://jsfiddle.net/3hpj0s8L/
I gave the .wrapper a display: flex and justify-content: center to center all the child elements.
This makes the positioning of each child element with padding/margin and transform: translate, and even the width of the fixed element, obsolete.
Here is the updated JSFiddle demo.
Related
I need to align some buttons no matter how the content of previous elements changes. This is the markup that I currently have.
I currently have the buttons at the bottom not aligned as shown in the following image:
Notice that the buttons REQUEST DEMO are not properly aligned, so what I want is no matter the content in the previous p element is, they are aligned as shown in the following image:
Notice that here I used the same text to make it look aligned, but I want the buttons to be aligned no matter what the content of the text is.
I also need this functionality to be responsive since I am using bootstrap and for smaller screens, it shows two elements or one element per line.
I was thinking to add a min-height or max-height in the CSS, but this hasn't solved my problem.
Add this to your code and see if this is what you are looking for.
Documentation for flexbox
.row {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
overflow: hidden;
}
.col-md-6 {
flex: 1;
margin-right: 10px;
padding: 50px;
}
.btn {
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
}
There's a few ways to do this. The easiest way would be using flexbox, here's a snippet example https://codepen.io/imohkay/pen/gpard
.parent {
display: flex;
justify-content: space-between;
}
Another way you could do it is having a fixed height for every column, and absolute position the button to the bottom and maybe add some padding to the content so the text never overlaps the button.
Add this class .btn-boxto the buttons and and this class .padbot to the box
CSS
.btn-box{
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%)
}
.padbot{
padding-bottom: 80px; // Adjust as your needs
}
DEMO HERE
This question already has an answer here:
How to center an element vertically in css in a scrollable container
(1 answer)
Closed 6 years ago.
Is there any CSS technique to center an image (or any other element) within container so that:
it appears centered horizontally and vertically initially (that is, its center is in the center of the containing div, no matter the size of the content);
it can be scrolled if it overflows its containing div.
If the content is always smaller than the container, I can simply use this well-known technique:
.content {
position: relative;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
This works perfectly for content that 'fits' inside its container, but stops working when the content starts to overflow.
Or I can remove the top, left and transform and let the content appear in the top-left corner of the container, which is potentially fine for very large content, but looks terrible for smaller content.
So is there a way in CSS to center content and allow scrolling for both overflowing and fit content?
The closest I've come is on this fiddle:
https://jsfiddle.net/4k5vp6m6/3/
I kind of suspect that the only way to do this is to inspect the content after loading to see if it fits or not.
Flexbox can do that
.container {
position: relative;
width: 500px;
height: 500px;
border: 3px solid green;
display: flex;
justify-content: center;
align-items: center;
overflow: auto;
}
JSFiddle Demo
I want to position a main container in the middle of the viewport.
The container is absolutely positioned, because I want it to fill up the whole vertical space by using position: absolute;top: 0;bottom: 0 (I know that I could achieve a similar effect by using height:100% on html, body, main, but as soon as the content of main exceeds the full height, the main container won't stretch at these exact 100%, which is not what I want).
So to position the absolutely positioned main container in the middle of the viewport, I rely on transform: translateX(-50%), which works painlessly - except in Internet Explorer, which adds an unwanted horizontal scrollbar!
Take a look at this pen:
http://codepen.io/jmuheim/pen/wCzcr
Is there any way to prevent the horizontal scrollbar? overflow-y: none doesn't seem to work.
I faced the same issue some days ago. It appears that it's a bug and the easier way to fix it, it's to position your element from the right instead of the left.
To use your example, the result will be :
main {
position: absolute;
top: 0;
right: 50%;
bottom: 0;
width: 50%;
background-color: red;
-webkit-transform: translateX(50%);
transform: translateX(50%);
}
You can try it live there : https://jsfiddle.net/julienvanderkluft/3udza0te/
You just need to change 2 things.
right: 50%;
transform: translateX(50%)
If you want to center your element horizontally and vertically, you can use something like this as well.
.parent {
display: flex;
}
.child {
margin: auto;
}
<div class="parent">
<div class="child">
<span>Center</span>
</div>
</div>
I'm looking to center text both vertically and horizontally over an image that grows when the page gets wider.
I originally had the image set as the background for a div of fixed height, in which case it was relatively easy to center it, but because background images aren't structural, I couldn't set the height to be an automatic function of the width, and I had to toss this option out when I went for a more responsive design.
So I've currently got a div with two elements in it, img and overlay text. The image width is set to 100% of the width of its container, and the height varies accordingly. As a consequence, though, I can't set the overlay text to be postion:absolute and top:80px or something, because the distance from the top will have to vary. And even doing top:25% or whatever doesn't work, because a) if that page width shrinks to squeeze the text, or if there's just more text, the vertical centering is thrown off when there are more/less lines, and b) the percentage is arbitrary -- it's not 50 or something, because that would put the top of the text overlay 50% down the image, when I want the center of the overlay to be there.
I've looked, among other things, at this post, which is definitely close -- but in both solutions, the image height is incapable of resizing, and in the former, the JS loads at page load, but then freezes, so that if I change page width/height, things get out of whack. Ideally, this solution wouldn't involve JS for just that reason (even if it reloaded on every resize, that feels non-ideal), but if that's the only solution, I'll take it.
Also, just for added details/fun, I've set a max-height on the image, because I don't want it to exceed roughly 300px height, even on a cinema display.
Basic fiddle of current attempt here, and identical code below. Any ideas? Thanks!
html
<div class='quotation_div'>
<img src='http://www.mountainprofessor.com/images/mount-ranier-mount-features-2.jpg'>
<div class='overlay'>
<p>Any reasonable amount of text should be able to go here. I want it to be able to center vertically even if it takes up 2 or 3 lines.</p>
</div>
</div>
css
.quotation_div {
position: relative;
display: table;
}
img {
width: 100%;
max-height: 300px;
}
.overlay {
z-index: 99;
width: 70%;
margin-left: 15%;
vertical-align: middle;
position: absolute;
top: 25%; /* Obvious problem, cause it's arbitrary */
}
p {
text-align: center;
color: red;
font-size: 165%;
font-weight: lighter;
line-height: 2;
}
You can use CSS background-size to set the width to 100% and the height will be calculated to maintain aspect ratio.
Here's a fiddle using that technique.
If you want the image as an HTML element then I suggest you set it's position to absolute and use the same method of disply:table-cell to center the overlay:
Here's a fiddle using that method, this one stretches the image because of the max-height.
Please Try the below css for .overlay as in your fiddle
.overlay {
z-index: 99;
width: 70%;
/* height: 100%; */
/* margin-left: 15%; */
/* vertical-align: middle; */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
or this is the updated fiddle link http://jsfiddle.net/hLdbZ/284/
I use this combination:
.CONTAINER {
position: relative;
text-align: center;
}
.TEXT {
text-align: center;
position: absolute;
top: 50%;
left: 0;
right: 0;
}
.IMG {
//for responsive image
width: 100%;
height: auto;
}
I just added to the html
<div align="center"></div>
to surround your existing code to get the image to center
hope that helps
How can I vertically align a table in the middle of the screen with css?
Generally something along the lines of this works pretty well in any block element with a defined height.
table {
position: absolute;
top: 50%;
margin-top: -50%;
}
Centering on the page is harder since you don't have a defined height, but I think this works.
html {
height: 100%;
}
You may encounter some browser differences, act accordingly.
Shortly said, just make your body a table, because vertical-align does work on table-cells:
body, html {
height: 100%;
}
body {
display: table;
}
#wrapper {
display: table-cell;
vertical-align: middle;
height: 80%;
}
This will vertical align your pagewrapper to middle and let it be fluid 80%
If you can give the table a fixed height, then feel free to adapt the CSS from this site I've just done.
Bit complicated to explain, but basically you set a 1 pixel high 'horizon' at 50% height of the screen around your content, then offset the top of the element to be centred (i.e. your table) by 50% of its height.
EDIT: Here's the article I originally made my solution from, with explanation & everything.