I'm trying for some days to vertically align the .sl_container.
I have tried vertical-align: middle, but that doesn't work.
If i specify a height and width for the .slideshow, then using top: 50%; and transform: translateY(-50%);, that works. See here.
The problem is that if i remove the height and width for the slider to take up the available space and adapt, then the this will make the inner div appear moved upwards. See here.
display: table-cell; was not an option as it would have the arrows at the sides of the full width of the parent div instead of on the image.
I've tried flex before, and it gets vertically aligned, but if the parent DIV width is bigger than the child DIV, for some reason it goes to
As I said, I’ve tried multiple ways and there is not a single one that gets it done well without breaking the arrow positions.
What I’ve done until now: JSFiddle
The before mentioned settings are commented out in the CSS section.
Any insight to this would be helpful as to a way or how to get it aligned without breaking the whole slide and arrows.
FYI: There is a bleeding effect from the DIV's or images expanding like 1-2px to the bottom, reason why I have each DIV coloured to see if I can fix it. I'm sure it something silly and if you know what it is, please say so. It’s not important so I don’t really care much. xD
Add this to your slideshow element, using flexbox. Flex Needs prefixing for IE11 (caniuse)
.slideshow {
display: flex;
align-items: center;
}
Edit: I enabled the commented height and width styles in your jsFiddle, but this method will vertically align slideshow child regardless of width and height.
Try using flexbox, it's the most elegant solution for vertical alignment
E.g.
<div class='parentDiv'>
<div class='childDiv'>
</div>
</div>
.parentDiv {
display: flex;
align-items: center;
justify-content: center;
}
Take a look -> here
Related
I really need your help here. I am very new to this Front End work and have submitted few questions related to this issue.
I am building an UI using react js. Where i display the cards for products and resources. I am using display flex in the container and making it center justified. But the issue is
I want to limit 4 cards per row
The width and hight of the cards to remain same irrespective of screen size
I have two sections where i display cards, at first place i am displaying 8 cards and the second place i am displaying two. I want the cards should start from same position in the UI
Alignment issue with header section
Here is the code and Demo: https://codesandbox.io/s/527rx9
Here is how it looks currently
I got some feedback from other questions i had pasted to use width to 1500px. But deep down i feel , not a right way and will break in some screen. But in this case as well i see alignment issues. below image by using 1500px in container width
Really need your help here to have a fix around it. If you are willing please paste the codesandbox or anyother link with a working code.
Regarding your container css for the grid:
.card-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
/* width: 1500px; */
}
It's no problem setting a max-width and you should do it, however dont use a specific width, instead set the max-width to 1500px if that's your desired max-width
.card-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
max-width: 1500px;
}
However i would recommend putting all the content below your banner inside of a div
<div class="content-container">
And setting the CSS of that one to the max-width in order to avoid some indentation problems to solve this specific problem
I have this layout. A container div set to
.container {
width: 80vw;
max-height: 75vh;
margin: auto;}
Inside that is a panel div with header and body divs, then my nested flexboxes. See image below:
The main flexbox div is set to row, with 2 divs in it which are flexbox column.
Inside those there is one div each which has overflow-y set to scroll, and they both have a lot of content.
This is working perfectly in Chrome and Safari, but in IE11 the scrolling divs do not scroll -- they go to the full height of their content and spill out of the container.
To be clear: only those divs in yellow should scroll.
What am I missing here?
Update
I have created a stripped-down pen: http://codepen.io/smlombardi/pen/reodZE?editors=1100
I see this question already has an accepted answer, but that solution didn't work for me. Something else did so I thought I would share for anyone encountering this in future.
My layout was very similar to this. There was a lot of nesting. Getting it to work in Chrome was quite straight forward. However, getting it to work in Firefox would take me another day of research & experimentation. In hindsight, it was probably because I didn't understand flex-box well enough.
To get a more complicated flex-box layout working cross-browser (by working, I mean flex children scrolling for overflowing content), do the following:
give outermost container a predefined height
use Flexbox for all containers that wrap the scrollable container
Since content lays vertically on the page by default, it's recommended to use: flex-direction: column
for Firefox: explicitly set min-height: 0 for every flex-item parent all the way up to the outermost flex-box.
if you have multiple flex children and the child that will scroll needs to expand to fill all available space, use flex-grow: 1
I got this from an article by Stephen Bunch, which I think was originally posted somewhere on SO too. Kudos to him!
Still, your scrolling flex child container will not work in IE11. It will expand to the full height of the contained content.
To fix it in IE11, do this:
Add overflow: hidden; to all its parents
Thanks to the original poster geon on SO in another related question.
Also, having a diagram of the flex layout was vastly more helpful than giant walls of code while researching to fix my own flex layout issues. Thanks OP!
Hoped that helped. It certainly did for me. All my flex-box issues for this more complicated layout.
PS: if this didn't solve it for you, maybe consider this list of flex-box bugs and their workarounds / solutions: https://github.com/philipwalton/flexbugs
Not sure if this is the best way, but I simplified this down to a simple bootstrap row, 2 columns.
I set the container to 75vh, and the 2 columns to the same 75vh.
The key was to set the 2 scrolling divs to flex-basis: something rem:
.search-results {
overflow-y: scroll;
margin-bottom: 10px;
flex-basis: 10rem;
background-color: #c4decf;
}
.accordions {
overflow-y: scroll;
overflow-x: hidden;
flex-basis: 40rem;
flex-grow: 1;
background-color: #f0f0f0;
padding: 10px;
}
See updated codepen: http://codepen.io/smlombardi/pen/WwLgyV?editors=1100
None of the answers here worked for me.
My experience with IE is that both inheritance and properties needs to be set explicitly a lot of the time and the same was true here.
The fix in my case was then to set the max height of container element to 90vh and overflow-y to hidden.
The child element (scroll element) was set to inherit the max-height with overflow-y set to auto. Simply setting it to 100% did not work, really the keyword was "inherit"
all other parent elements got overflow hidden
i am learning CSS, i am trying to place the div with red background just below the body, i can't seem to make it fit to the body, whenever i adjust the width it doesn't align with the body,when i tried to place it center and 100% width, it occupies 100% of the width of the page it does not align with the white background area, whenever i do 80% it does align left and does not align with the white background area. Please point me to the right direction. I'm stuck :(
the code i have so far is here: http://pastebin.com/VPMgbzQ2
Thanks in advance.
Make your footer div out of the tabs div and no need of position: absolute on it. Make following changes:
#footer
{
margin-top:80%;
height: 20px;
width:50%;
text-align:center;
background:#C00;
}
Here is fiddle.
Also it seems that you are trying to make responsive design but let me tell you that the way you are proceeding is not the right one for it. You may read Responsive Design By Ethan Marcotte for learning it.
EDIT
Make following changes:
Give height: 400px; or as required to table div.
Make your footer div out of the table div.
Either remove margin-top or change it to 5% or 10% as required in footer div.
Add min-height: 100%; to .tabs.
Check out the fiddle.
Try hardcoding the height value
#spaceheader {
width: 100%;
height: 100px;
background: #000000;
}
I see your issue now. The parent element <div class="tab"> is what's causing your issues. If I were you, I'd take the radio buttons out of the tab, make it not have a float:left on it, and this will probably fix things. You then need to remove the absolute positioning on your footer div.
Also, it looked like you put the footer div inside of the tab, when in actuality, it should be outside of all of the tabs, beneath them in the code.
I have a peculiar issue with CSS -- the 'VPS Plans' div and 'Features' div should be floated together and line up at the bottom. Unfortunately, unless I adjust the size of the Features div to 460px, it kicks down to the next line and I can't figure it out.
The page can be seen here.
Thanks!
Everything is looks good, you need to add display: inline-table; for below CSS.
The element will displayed as an inline-level table
ul.vt li.vt-line-header {
display: inline-table; //----Add this to your CSS
}
Hope you understand.
All I want to do is center some divs on the page. The outer one is a fixed size and is centered horizontally via margin: 0 auto. Inside that div I have a couple images side by side inside another div that wraps to their size. I want to center that div both vertically and horizontally inside the outer div.
It seems like a simple enough thing to want to do, no?
Update:
Let me bit a bit clearer as to what exactly the problem is. I'd love to use the display: table-cell trick to enable vertical-align: middle but the problem is that when I do this, the div shrinks down to the size of its content, thus not offering any space for centering at all, and that div is just stuck up in the top left corner of the parent. I need my display: table-cell block to fill up the available space of the containing div so it has room to center its contents.
Update 2: Solved!
Turns out the problem was that I didn't have the display: table-cell block contained in a div that was set to display: table. I'm not entirely sure how display: table differs from display: block, but it's apparently a necessary step. It appears to be working now!
This might help:
http://www.vanseodesign.com/css/vertical-centering/