I'm trying to implement a react-slick carousel but I'm having trouble getting the image to vertically center. This problem is demonstrated here.
https://codesandbox.io/s/react-slick-playground-o7dhn
Here is the problems
Images are not centered:
Flexbox property does not work (the red div is a flexbox with justify-content: center;
align-items: center;)
margin:auto only works for horizontal alignment (which I shouldn't have to set if I'm using flexbox)
I can not get rid of the top margin (even with padding:0px on the div and margin-top:0px on the image) As a consequence, any image with the height of 400px or more gets shifted and cut off (div has the height of 400px)
How do I fix it.
img {
margin: auto;
height: 200px;
width: 200px;
}
.slick-slide > div {
display: grid;
place-items: center;
width: 80%;
margin-top: 50px;
margin: auto;
height: 500px;
padding: 0px;
background: red;
}
This is working right now. I just changed display flex to grid, and made place-items centered
Related
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
How can I vertically align elements in a div?
(28 answers)
Closed 1 year ago.
// css
.table-art {
background-image:url("../img/table-decorated1.jpg");
background-size: cover;
width: auto;
height: 500px;
}
.box-test {
border: 5px solid red;
width: 150px;
height: 50px;
margin: auto;
}
// html
<div class="table-art">
<div class="box-test">
</div>
</div>
The red box is placed like this when I use the css. However, if I'm not wrong, due to the 'margin: auto' it should superposition the box, from left right down and up within the div with the picture, however it only seems to be doing it for left and right, horizontally it works fine, however I want to have this box vertically centered as well.
.box-test {
border: 5px solid red;
width: 150px;
height: 50px;
margin: auto;
position: absolute;
top: 50%;
left: 50%;
}
I tried to have it centered using the ol' top and left 50%. Which in theory should put it straight in the center. However, as you can see, it's slightly off to the down and right. Increasing the size of the box div will always go right and down, but it doesn't seem to take into account the left and upper part of itself.
I tried also using right and down: 50% but it's always in that particular location. It's like the website thinks this is really the center, is it due to the image?
I've tried looking at different solutions such as using padding but that didn't work either, what should I do to make sure it's box size always remains in the center within this filled out div?... Or, is there a better way to doing this and I'm just hurting myself for nothing? What's the deal here?
*The image's size in question is 765x510
Also using firefox navigator, but chrome also does the same thing.
Thank you for reading, any help will be very much appreciated!
You could use flex or grid - like
.table-art {
background-image:url("../img/table-decorated1.jpg");
background-size: cover;
width: auto;
height: 500px;
/* center items */
display: grid;
place-items: center;
}
.box-test {
border: 5px solid red;
width: 150px;
height: 50px;
margin: auto;
}
Add display flex to the parent div and then margin:auto to the inner div
CSS
METHOD 1 :
By using the position relative for parent div and absolute for child element you can easily cneter the child element using top and left props of css ( of child with absolute position ) as 50% and finally center the child element with transform prop
/*Using positioning and transform method*/
.table-art {
background-image: url("../img/table-decorated1.jpg");
background-size: cover;
width: auto;
height: 500px;
background-color: blue;
position: relative;
}
.box-test {
border: 5px solid red;
width: 150px;
height: 50px;
position: absolute;
left: 50%;
top:50%;
transform: translate(-50% , -50%);
}
METHOD 2 :
Using the grid or flex you can easily center the child div by setting the parent div's display to flex or grid and then using the justify-content ( for flex and place-content for grid ) and aligning the div vertically center with align-items to center ( grid doesn't needs this prop to center the content ! )
/*Using flex or grid to center the content*/
.table-art {
background-image: url("../img/table-decorated1.jpg");
background-size: cover;
width: auto;
height: 500px;
background-color: blue;
display: flex;
align-items: center;
justify-content: center;
}
.box-test {
border: 5px solid red;
width: 150px;
height: 50px;
}
HTML
<div class="table-art">
<div class="box-test">
</div>
</div>
Just add below to your .table-art class
display:flex;
align-items: center
.table-art {
background-image: url("https://picsum.photos/300/300");
background-size: cover;
width: auto;
height: 500px;
display:flex;
align-items: center
}
.box-test {
border: 5px solid red;
width: 150px;
height: 50px;
margin: auto;
}
<div class="table-art">
<div class="box-test">
</div>
</div>
I have a page-wide wrapping div that has flexbox alignment to center:
.app_container{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow-y: auto;
overflow-x: hidden;
padding: 10px;
}
In this wrapper, I have a menu that can vary in height as the user expands submenus. The problem is when the menu becomes vertically bigger than the window height. Some parts of the menu gets cut off at the top.
Image: https://imgur.com/a/x00tnoJ
One solution that I found was to simply get overflow: auto on the menu. But that causes the scroll bar to appear on the menu, not on the page wrapper. I want the scroll bar to be on the page wrapper.
Image: https://imgur.com/a/0eZM5Iq
Don't think it is relevant, but I use React.
Here is codepen: https://codepen.io/GuacomoleCyclone/pen/xxEoary
EDIT: I've stumbled upon a solution. I've added this and it solved all problems:
html, body{
display: grid;
}
If I understand correctly what your codepen is showing, the issue seems to be coming from setting the width and height on the html element. You want to change:
html, body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
to
html, body {
padding: 0px;
margin: 0px;
}
body {
width: 100%;
height: 100%;
}
I have an image (img tag) and a div, whose display property is set to flex.
div and img are placed in a row. They are floated.
I want to apply margin-left to the div but it does not work, unless I set the display property of the div to inline-block.
I've explored StackoverFlow, the nearest post to my case is this one. But that so post does not make me understand what's going on.
As it can be seen in the image below, the margin of div on the left, overlaps with the image. Why? why isn't it pushing the div to right?:
Here is my code:
html
<div id="traffic">
<p>Traffic</p>
<img id="chart" src="https://www.syncfusion.com/products/flutter/control/images/chart/chart-types/flutter-multiple-axis-charts.png" alt="" srcset="">
<div id="traffic-infos"></div>
</div>
css
#traffic {
background-color: rgb(255, 255, 255);
padding: 15px 15px 15px 15px;
overflow: auto; /* so the container resized its height */
}
#traffic-infos {
display: flex;
flex-direction: column;
margin-left: 40px;
height: 300px;
background-color: black;
}
#chart{
width: 100%;
max-width: 850px;
min-width: 600px;
height: auto;
float: left;
}
the same code in JsFiddle: https://jsfiddle.net/shahryarslg/xmo5uahv/8/
The whole problem is solved if I change the display of traffic-infos class to inline-block. But I want to understand how display is related to this problem? what's going on?
Thanks in advance.
You need to set the margin on the floated element:
#chart {
margin-right: 40px;
}
This question already has answers here:
Can't scroll to top of flex item that is overflowing container
(12 answers)
Closed 4 years ago.
I've been on this for a while now and tried a lot of the solutions I've seen across different Stackoverflow questions / blogposts / ... But I honestly can't figure out what's going wrong.
I've got a flexed div with two divs in there. The top div A has a fixed height, the other div B fills the rest using flex: 1;. If the screen is resized and it's smaller than the height of A + B together, then B will start overflowing. I want it to scroll, but I also want the content to be fully visible when scrolling. For some reason which I can't figure out, the content renders out of the top of div B as you can see in this screenshot of my fiddle:
Some of the previously asked questions got me somewhere. For example setting the body to height: auto;, but then when my screen is bigger than A + B it can't be center aligned anymore. min-height: 0; also doesn't seem to help in this case.
How can I make sure my container overflows but will fully show the content of it?
You can solve the issue by giving .second:
flex-basis: auto;
flex-shrink: 0;
Or, with shorthand: flex: 1 0 auto;
Working example:
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
body {
display: flex;
flex-direction: column;
}
.second {
flex: 1 0 auto;
background: blue;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
min-height: 0;
overflow: auto;
}
.container {
display: flex;
flex-direction: column;
width: 100%;
max-width: 500px;
min-height: 0;
/* added this to make it obvious. Obviously, not needed */
padding: 2rem 0;
}
.container-child {
height: 110px;
background: green;
width: 100%;
}
.container-child:not(:last-child) {
margin-bottom: 30px;
}
<div class="second">
<div class="container">
<div class="container-child"></div>
<div class="container-child"></div>
<div class="container-child"></div>
</div>
</div>
I added some top and bottom padding to .container to make it obvious that it's working - but it's not needed.
Now let's look at why this is happening. When you apply .second { flex:1; } it means:
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
... which allows it to have a smaller size than its contents.
Whenever you have a bigger child centered in a smaller parent, the browser won't provide a scrollbar to top (or to left, when horizontal), because then , if the top of the parent and the top of the child coincide and the child is bigger than the parent, the child is no longer centered, is it?
The same happens when using other centering techniques and you center a bigger child in a smaller parent.
To fix the problem, you need to prevent the child from outgrowing the parent.
In this case, it meant sizing .second based from its content (flex-basis: auto) and not allowing it to shrink: (flex-shrink: 0;).
To better visualize the issue, consider this example:
.left, .right {
position: relative;
border: 1px solid red;
padding: 1rem 5rem;
}
.left {
left: -5rem;
}
.right {
right: -5rem;
}
<div class="left">
I'm taken left
</div>
<div class="right">
I'm taken right
</div>
If the browser provided scrollbars to allow you to scroll to beginning of .left, it would mean that left: -5rem did not apply. I hope that makes sense, I can't explain it better.
This question already has answers here:
Can't scroll to top of flex item that is overflowing container
(12 answers)
Closed 5 years ago.
So i'm using CSS flex to create vertically centered Modal popups ( align-items: center; ). The issue is that when the Modal is taller than the viewport (and is scrollable), the Flex prioritizes the 'centered-ness' and thus makes the top of the modal inaccessible.
Has anyone found ways around this? I could use a media query to make all Modals flex-start aligned, however i still want smaller modals to be vertically centered.
I had thought of trying to make the modal flex-shrink; to always fit 100% of the viewport, but it needs to scroll (and allow content to fit in further down the page) so not sure!
.outer {
display: flex;
align-items: center;
}
Thanks to #Pete for answering this:
The solution was setting max-height: 100%; and overflow: auto; (i had previously had overflow: visible; which caused issue.
I also found another method:
by placing the following flex properties on the 'outer outer' container (in this case, we're using ReactModal, so there's ReactModalPortal).
So we do
```.ReactModalPortal {
display: flex;
align-items: flex-start;
.innerContainer {
display: flex;
align-items: center;
}
}
```
i suppose by putting flex-start on the parent, it always ensures the content 'begins' at the top of the window.
Here you go
.parent{
top:50px;
}
.parent,
.child {
position: relative;
width: 50px;
height: 50px;
margin: auto;
background: #CCC;
}
.child {
position: relative;
width: 25px;
height: 100px;
margin: auto;
background: #000;
top: 50%;
transform: translate(0, -50%);
}
<div class="parent">
<div class="child"></div>
</div>