I am trying to centre display: flex; and having no luck up to now. I have tried multiple things, among others:
justify-content: center;
align-items: center;
The issue I am having is no matter what I change it to, the divs stay to the left of the screen. I will add a screenshot of this below:
Probably something I am doing wrong so any help would be much appreciated. If I can use something else apposed to Flex then I am happy to change this to something else if that is recommended. I just need the divs to be displayed centred at the top of the screen.
Here is my code:
body {
background-color: #ffffff;
min-height: 120vh;
height: 100%;
margin: 0;
max-width: 120vh;
overflow: hidden;
}
.grid-container {
display: flex;
align-items: center;
margin: 0;
flex-direction: row;
height: 440px;
width: fit-content;
max-width: 880px;
flex-wrap: nowrap;
gap: 10px;
}
.grid-container-2 {
display: flex;
align-items: center;
margin: 0;
flex-direction: row;
height: 440px;
width: fit-content;
max-width: 880px;
flex-wrap: nowrap;
gap: 10px;
}
.Divheaders {
color: #ffffff;
padding: 3px;
border: 3px solid #000000;
}
.divONE {
background-color: #ffffff3b;
height: 650px;
width: 650px;
max-width: 50%;
max-height: 50%;
margin-left: auto;
margin-right: auto;
position: relative;
/* align-items: relative; */
/* width: auto;
height: auto;
margin-left: auto;
margin: 0px auto; */
/* width: 325px; */
padding: 3px;
border: 3px inset #000000;
border-radius: 3px;
outline-style: solid;
}
.DIVpic {
max-width: 75%;
max-height: 75%;
margin: 0px;
position: absolute;
top: 60%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
cursor: pointer;
/* width: auto;
height: auto;
margin: 0px auto; */
/* width: 315px; */
/* position: absolute; */
float: none;
}
<div class="grid-container">
<div class="divONE">
<h2 class="Divheaders">MR11</h2>
<a href="https:///calendar.html">
<img class="DIVpic" src="{% static 'images/MeetingPic.jpg' %}" alt="MR11 Meeting room link"></a>
</div>
<div class="divONE">
<h2 class="Divheaders">MR12</h2>
<a href="https:///calendar.html">
<img class="DIVpic" src="{% static 'images/MeetingPic5.jpg' %}" alt="MR12 Meeting room link"></a>
</div>
<div class="divONE">
<h2 class="Divheaders">MR13</h2>
<a href="https:///calendar.html">
<img class="DIVpic" src="{% static 'images/MeetingPic2.jpg' %}" alt="MR13 Meeting room link"></a>
</div>
</div>
<div class="grid-container-2">
<div class="divONE">
<h2 class="Divheaders">MR14</h2>
<a href="https:///calendar.html">
<img class="DIVpic" src="{% static 'images/MeetingPic3.jpg' %}" alt="MR14 Meeting room link"></a>
</div>
<div class="divONE">
<h2 class="Divheaders">MRNEW</h2>
<a href="">
<img class="DIVpic" src="{% static 'images/MeetingPic4.jpg' %}" alt="MR15 Meeting room link"></a>
</div>
<div class="divONE">
<h2 class="Divheaders">MR15</h2>
<a href="https:///calendar.html">
<img class="DIVpic" src="{% static 'images/MeetingPic1.jpg' %}" alt="MR15 Meeting room
link"></a>
</div>
</div>
4
Answers
Not sure if this might help, but try adding this in body. This will center all your divs
Or you can make the body element as flex to center the child elements
You could use
but remember that centers your div in absolute, so if you want to have a dynamic width and height it wont work anymore.
You don`t need to put another row in different div with class grid-container-2. To achieve what you want you need to set parent wrap container to width: 100%. Add to grid-container flex-direction: row; and flex-wrap: warp; (the shortcut for this is flex-flow: [flex-direction] [flex-wrap]). To make every child stay same size you need to style DivONE by flex-basis: 33%, flex-shrink: 1, flex-grow: 1. The shortcut for this is flex: [flex-grow] [flex-shrink] [flex-basis];
Notice I set wrap height to 100vh. It`s mean that the height of the wrap will be 100% of the available window space.
Hope this helps!
You can try
display: grid
with itsalign-content
andjustify-content
.