There are a few divs. I want to set width of black as needed and put it on the middle (horizontally) of red. Then put some elements in black in one line and position them on the middle (vertically) of black.
The final result should looks like:
There is a problem with center vertically.
My code is:
<html>
<body>
<div id="mainContainer">
<div id="singleOptions">
<div id="myObject"></div>
<div id="mySecondObject"></div>
</div>
</div>
</body>
<style>
#mainContainer {
background: red;
width: 100px;
height: 100px;
margin-top: 50px;
text-align: center;
}
#singleOptions {
height: 100%;
background: black;
display: inline-block;
}
#myObject {
width: 10px;
display: inline-block;
height: 10px;
background: green;
}
#mySecondObject {
width: 10px;
display: inline-block;
height: 10px;
background: yellow;
}
</style>
</html>
How is it possible to get this effect?
You can try it like this
#mainContainer {
background: red;
width: 100px;
height: 100px;
margin-top: 50px;
text-align: center;
}
#singleOptions {
height: 100%;
background: black;
display: flex;
margin: 0 auto;
justify-content: space-between;
width: min-content;
align-items: center;
}
#myObject {
width: 10px;
display: inline-block;
height: 10px;
margin-right: 5px;
background: green;
}
#mySecondObject {
width: 10px;
display: inline-block;
height: 10px;
background: yellow;
}
<html>
<body>
<div id="mainContainer">
<div id="singleOptions">
<div id="myObject"></div>
<div id="mySecondObject"></div>
</div>
</div>
</body>
</html>
You can achieve this using flexbox:
#mainContainer {
background: red;
width: 100px;
height: 100px;
text-align: center;
display: flex;
justify-content: center;
}
#singleOptions {
height: 100%;
background: black;
display: flex;
align-items: center;
}
#myObject {
width: 10px;
display: inline-block;
height: 10px;
background: green;
}
#mySecondObject {
width: 10px;
display: inline-block;
height: 10px;
background: yellow;
}
<div id="mainContainer">
<div id="singleOptions">
<div id="myObject"></div>
<div id="mySecondObject"></div>
</div>
</div>
This is solved easily with Flexbox.
Change your CSS for #singleOptions as follows.
#singleOptions {
height: 100%;
background-color: black;
display: flex;
justify-content: space-between;
align-items: center;
}
Related
I want to make a image (inside a div) to the most left of the bottom div and I don't how to do this.
For example I have this image
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.applicationimage {
width: 60px;
height: 60px;
border-radius: 100%;
}
.settings {
display: flex;
width: 80%;
height: 40rem;
background-color: white;
align-self: center;
}
<main>
<div class="container">
<div class="applicationinfo">
<img src="https://wallup.net/wp-content/uploads/2019/09/1667-beautiful-gray-cat-748x468.jpg" class="applicationimage">
</div>
<div class="settings">
<span>hi</span>
</div>
</div>
</main>
I'm new to html & css so I will appreciate your help making this image to the most left of his bottom div.
If you know the width of the div, it's easy. You can give the .applicationinfo element align-self: flex-start; and margin-left: 10%; (10% is calculated by this formula: (100% - widthOfDiv) / 2)
body {
background: black;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.applicationinfo {
align-self: flex-start;
margin-left: 10%;
}
.applicationimage {
width: 60px;
height: 60px;
border-radius: 100%;
}
.settings {
display: flex;
width: 80%;
height: 40rem;
background-color: white;
align-self: center;
}
<main>
<div class="container">
<div class="applicationinfo">
<img src="https://wallup.net/wp-content/uploads/2019/09/1667-beautiful-gray-cat-748x468.jpg" class="applicationimage">
</div>
<div class="settings">
<span>hi</span>
</div>
</div>
</main>
remove the flex direction, here's it
display: flex;
justify-items: flex-end;
align-items: flex-end;}
You can do it by positioning applicationinfo since you haven't styled it.
you can add parent position: relative; then child to absolute; then give child top: 0; left: 0;
.container {
display: flex;
height: 80vh;
flex-direction: column;
align-items: center;
justify-content: center;
align-items: center;
position: relative;
background: #222;
border: 1px solid yellow;
}
.applicationinfo {
width: 80%;
top: 0;
left: 0;
border: 1px solid green;
}
.applicationimage {
width: 60px;
height: 60px;
border-radius: 100%;
border: 1px solid blue;
}
.settings {
display: flex;
width: 80%;
height: 80%;
background-color: white;
align-self: center;
}
<div class="container">
<div class="applicationinfo">
<img src="https://wallup.net/wp-content/uploads/2019/09/1667-beautiful-gray-cat-748x468.jpg" class="applicationimage">
</div>
<div class="settings">
<span>hi</span>
</div>
</div>
I have a main container that contains an image and a div. What I want to achieve is to center the div on top of the image without having to use absolute or relative positioning on it. How can I achieve this? Thanks in advance.
.imgCon {
display: flex;
width: 95%;
height: 95%;
margin: auto;
background-color: blue;
}
.imgCon img {
width: 95.5%;
height: 95%;
margin: auto;
border-radius: inherit;
}
.iconCon {
display: flex;
justify-content: center;
align-items: center;
width: 30%;
height: 30%;
margin: auto;
color: #ffffff;
border-radius: 50%;
background-color: #000000;
}
<div class="imgCon">
<!--center this-->
<div class="iconCon">
C
</div>
<img src="https://www.vitalground.org/wp-content/uploads/2021/11/Bart-the-Bear-II--e1637176991443.jpg" />
</div>
The only way I can think of without using absolute positioning or changing your markup is to use a CSS Grid and make both elements occupy the same cell.
.imgCon {
display: flex;
width: 95%;
height: 95%;
margin: auto;
background-color: blue;
display: grid;
}
.imgCon img {
width: 95.5%;
height: 95%;
margin: auto;
border-radius: inherit;
grid-column-start: 1;
grid-row-start: 1;
}
.iconCon {
display: flex;
justify-content: center;
align-items: center;
width: 4rem;
height: 4rem;
margin: auto;
color: #ffffff;
border-radius: 50%;
background-color: #000000;
grid-column-start: 1;
grid-row-start: 1;
}
<div class="imgCon">
<img src="https://www.vitalground.org/wp-content/uploads/2021/11/Bart-the-Bear-II--e1637176991443.jpg" />
<!--center this-->
<div class="iconCon">
C
</div>
</div>
You could use background-image property and tiny styling changes.
.imgCon {
display: flex;
justify-content: center;
align-items: center;
width: 20rem;
height: 20rem;
margin: auto;
background-color: blue;
background-image: url("https://www.vitalground.org/wp-content/uploads/2021/11/Bart-the-Bear-II--e1637176991443.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 80%;
}
.iconCon {
display: flex;
justify-content: center;
align-items: center;
width: 3rem;
height: 3rem;
margin: auto;
color: #ffffff;
border-radius: 50%;
background-color: #000000;
}
.container {
display: flex;
justify-content: center;
align-item: center;
}
<div class="imgCon">
<div class="container">
<!--center this-->
<div class="iconCon">
C
</div>
</div>
</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 months ago.
Improve this question
Locked. Comments on this question have been disabled, but it is still accepting new answers and other interactions. Learn more.
I want to create something similar to this one:
... and have it in flex, so it will rearrange. I don't know why I can't get to rearrange it to the right side (it overlaps on top of the chart). See the below what I have got:
I would like it to be at the right side, and occupy the rest of the window. How can I arrange this with CSS?
In simple terms, I would like to have the green container to the right side, and when making smaller the navigator, and the green container to flex and go under the red container. I am trying to do this, but for some reason it’s not happening.
I dont uderstand why the right container goes to right side of the first column.
Here’s my snippet:
* {
margin: 0px;
padding: 0px;
}
.general {
margin: auto;
display: grid;
margin-top: 0%;
width: 100%;
height: 100%;
background-color: #4f6d7a;
}
.enlaces {
float: center;
display: center;
width: 100%;
height: 100px;
background-color: #166088;
}
.tablas_carpetas {
position:grid;
display: flex;
flex-wrap: wrap;
width: 100%;
height: 300px;
background-color: #DBE9EE;
}
.tablas {
position:left;
grid-template-columns: auto;
display: flex;
flex-wrap: wrap;
flex-direction:column;
order: 1;
background-color: #dfc0c0;
height: 300px;
}
.tablas > div {
display:right;
float:right;
background: #ddd;
line-height: 20px;
height: 20px;
margin: 1px;
text-align: center;
}
.tablas_carpetas > .carpetas {
display:flex;
position:left;
order: 2;
height: 100%;
background-color: green;
}
.anuncios{
float: center;
display: center;
width: 100%;
height: 100px;
background-color: red;
}
.pie{
float: center;
display: center;
width: 100%;
height: 100px;
background-color: black;
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#botones").mouseenter(function () {
$("#resto").show();
});
$("#botones").mouseleave(function () {
$("#resto").hide();
});
});
</script>
<div class="general">
<div class="enlaces"></div>
<div class="tablas_carpetas">
<div class="tablas">
<div>AA</div>
<div>AKo</div>
<div>AQo</div>
<div>AJo</div>
<div>ATo</div>
<div>A9o</div>
<div>A8o</div>
<div>A7o</div>
<div>A6o</div>
<div>A5o</div>
<div>A4o</div>
<div>A3o</div>
<div>A2o</div>
<div>AKs</div>
<div>KK</div>
<div>KQo</div>
<div>KJo</div>
<div>KTo</div>
<div>K9o</div>
<div>K8o</div>
<div>K7o</div>
<div>K6o</div>
<div>K5o</div>
<div>K4o</div>
<div>K3o</div>
<div>K2o</div>
<div>AQs</div>
<div>KQs</div>
<div>QQ</div>
<div>QJo</div>
<div>QTo</div>
<div>Q9o</div>
<div>Q8o</div>
<div>Q7o</div>
<div>Q6o</div>
<div>Q5o</div>
<div>Q4o</div>
<div>Q3o</div>
<div>Q2o</div>
<div>AJs</div>
<div>KJs</div>
<div>QJs</div>
<div>JJ</div>
<div>JTo</div>
<div>J9o</div>
<div>J8o</div>
<div>J7o</div>
<div>J6o</div>
<div>J5o</div>
<div>J4o</div>
<div>J3o</div>
<div>J2o</div>
<div>ATs</div>
<div>KTs</div>
<div>QTs</div>
<div>JTs</div>
<div>TT</div>
<div>T9o</div>
<div>T8o</div>
<div>T7o</div>
<div>T6o</div>
<div>T5o</div>
<div>T4o</div>
<div>T3o</div>
<div>T2o</div>
<div>A9s</div>
<div>K9s</div>
<div>Q9s</div>
<div>J9s</div>
<div>T9s</div>
<div>99</div>
<div>98o</div>
<div>97o</div>
<div>96o</div>
<div>95o</div>
<div>94o</div>
<div>93o</div>
<div>92o</div>
<div>A8s</div>
<div>K8s</div>
<div>Q8s</div>
<div>J8s</div>
<div>T8s</div>
<div>98s</div>
<div>88</div>
<div>87o</div>
<div>86o</div>
<div>85o</div>
<div>84o</div>
<div>83o</div>
<div>82o</div>
<div>A7s</div>
<div>K7s</div>
<div>Q7s</div>
<div>J7s</div>
<div>T7s</div>
<div>97s</div>
<div>87s</div>
<div>77</div>
<div>76o</div>
<div>75o</div>
<div>74o</div>
<div>73o</div>
<div>72o</div>
<div>A6s</div>
<div>K6s</div>
<div>Q6s</div>
<div>J6s</div>
<div>T6s</div>
<div>96s</div>
<div>86s</div>
<div>76s</div>
<div>66</div>
<div>65o</div>
<div>64o</div>
<div>63o</div>
<div>62o</div>
<div>A5s</div>
<div>K5s</div>
<div>Q5s</div>
<div>J5s</div>
<div>T5s</div>
<div>95s</div>
<div>85s</div>
<div>75s</div>
<div>65s</div>
<div>55</div>
<div>54o</div>
<div>53o</div>
<div>52o</div>
<div>A4s</div>
<div>K4s</div>
<div>Q4s</div>
<div>J4s</div>
<div>T4s</div>
<div>94s</div>
<div>84s</div>
<div>74s</div>
<div>64s</div>
<div>54s</div>
<div>44</div>
<div>43o</div>
<div>42o</div>
<div>A3s</div>
<div>K3s</div>
<div>Q3s</div>
<div>J3s</div>
<div>T3s</div>
<div>93s</div>
<div>83s</div>
<div>73s</div>
<div>63s</div>
<div>53s</div>
<div>43s</div>
<div>33</div>
<div>32o</div>
<div>A2s</div>
<div>K2s</div>
<div>Q2s</div>
<div>J2s</div>
<div>T2s</div>
<div>92s</div>
<div>82s</div>
<div>72s</div>
<div>62s</div>
<div>52s</div>
<div>42s</div>
<div>32s</div>
<div>22</div>
</div>
<div class="carpetas">
<div class="botones">
<button id="principal_1">Redes Sociales</button>
<div class="resto" hidden>
<button>Facebook</button>
<button>Twitter</button>
<button>LinkedIn</button>
<button>Gooogle</button>
</div>
</div>
</div>
</div>
<div class="anuncios"></div>
<div class="pie"></div>
</div>
Here is what I changed:
.tablas_carpetas {
display: flex;
width: 100%;
height: 600px;
background-color: #DBE9EE;
}
.tablas {
width: 50%;
gap: 1%;
display: flex;
flex-wrap: wrap;
background-color: #dfc0c0;
height: 100%;
}
.tablas > div {
background: #ddd;
display: flex;
justify-content: center;
align-items: center;
line-height: 20px;
height: 35px;
flex: 0 0 6%;
margin: 1px;
text-align: center;
border-radius: 5px;
}
.tablas_carpetas > .carpetas {
width: 50%;
height: 100%;
background-color: green;
}
Here's a complete snippet:
* {
margin: 0px;
padding: 0px;
}
.general {
margin: auto;
display: grid;
margin-top: 0%;
width: 100%;
height: 100%;
background-color: #4f6d7a;
}
.enlaces {
float: center;
display: center;
width: 100%;
height: 100px;
background-color: #166088;
}
.tablas_carpetas {
position:grid;
display: flex;
flex-wrap: wrap;
width: 100%;
height: 300px;
background-color: #DBE9EE;
}
.tablas {
position:left;
grid-template-columns: auto;
display: flex;
flex-wrap: wrap;
flex-direction:column;
order: 1;
background-color: #dfc0c0;
height: 300px;
}
.tablas > div {
display:right;
float:right;
background: #ddd;
line-height: 20px;
height: 20px;
margin: 1px;
text-align: center;
}
.tablas_carpetas > .carpetas {
display:flex;
position:left;
order: 2;
height: 100%;
background-color: green;
}
.anuncios{
float: center;
display: center;
width: 100%;
height: 100px;
background-color: red;
}
.pie{
float: center;
display: center;
width: 100%;
height: 100px;
background-color: black;
}
.tablas_carpetas {
display: flex;
width: 100%;
height: 600px;
background-color: #DBE9EE;
}
.tablas {
width: 50%;
gap: 1%;
display: flex;
flex-wrap: wrap;
background-color: #dfc0c0;
height: 100%;
}
.tablas > div {
background: #ddd;
display: flex;
justify-content: center;
align-items: center;
line-height: 20px;
height: 30px;
flex: 0 0 7%;
margin: 1px;
text-align: center;
border-radius: 5px;
}
.tablas_carpetas > .carpetas {
width: 50%;
height: 100%;
background-color: green;
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#botones").mouseenter(function () {
$("#resto").show();
});
$("#botones").mouseleave(function () {
$("#resto").hide();
});
});
</script>
<div class="general">
<div class="enlaces"></div>
<div class="tablas_carpetas">
<div class="tablas">
<div>AA</div>
<div>AKo</div>
<div>AQo</div>
<div>AJo</div>
<div>ATo</div>
<div>A9o</div>
<div>A8o</div>
<div>A7o</div>
<div>A6o</div>
<div>A5o</div>
<div>A4o</div>
<div>A3o</div>
<div>A2o</div>
<div>AKs</div>
<div>KK</div>
<div>KQo</div>
<div>KJo</div>
<div>KTo</div>
<div>K9o</div>
<div>K8o</div>
<div>K7o</div>
<div>K6o</div>
<div>K5o</div>
<div>K4o</div>
<div>K3o</div>
<div>K2o</div>
<div>AQs</div>
<div>KQs</div>
<div>QQ</div>
<div>QJo</div>
<div>QTo</div>
<div>Q9o</div>
<div>Q8o</div>
<div>Q7o</div>
<div>Q6o</div>
<div>Q5o</div>
<div>Q4o</div>
<div>Q3o</div>
<div>Q2o</div>
<div>AJs</div>
<div>KJs</div>
<div>QJs</div>
<div>JJ</div>
<div>JTo</div>
<div>J9o</div>
<div>J8o</div>
<div>J7o</div>
<div>J6o</div>
<div>J5o</div>
<div>J4o</div>
<div>J3o</div>
<div>J2o</div>
<div>ATs</div>
<div>KTs</div>
<div>QTs</div>
<div>JTs</div>
<div>TT</div>
<div>T9o</div>
<div>T8o</div>
<div>T7o</div>
<div>T6o</div>
<div>T5o</div>
<div>T4o</div>
<div>T3o</div>
<div>T2o</div>
<div>A9s</div>
<div>K9s</div>
<div>Q9s</div>
<div>J9s</div>
<div>T9s</div>
<div>99</div>
<div>98o</div>
<div>97o</div>
<div>96o</div>
<div>95o</div>
<div>94o</div>
<div>93o</div>
<div>92o</div>
<div>A8s</div>
<div>K8s</div>
<div>Q8s</div>
<div>J8s</div>
<div>T8s</div>
<div>98s</div>
<div>88</div>
<div>87o</div>
<div>86o</div>
<div>85o</div>
<div>84o</div>
<div>83o</div>
<div>82o</div>
<div>A7s</div>
<div>K7s</div>
<div>Q7s</div>
<div>J7s</div>
<div>T7s</div>
<div>97s</div>
<div>87s</div>
<div>77</div>
<div>76o</div>
<div>75o</div>
<div>74o</div>
<div>73o</div>
<div>72o</div>
<div>A6s</div>
<div>K6s</div>
<div>Q6s</div>
<div>J6s</div>
<div>T6s</div>
<div>96s</div>
<div>86s</div>
<div>76s</div>
<div>66</div>
<div>65o</div>
<div>64o</div>
<div>63o</div>
<div>62o</div>
<div>A5s</div>
<div>K5s</div>
<div>Q5s</div>
<div>J5s</div>
<div>T5s</div>
<div>95s</div>
<div>85s</div>
<div>75s</div>
<div>65s</div>
<div>55</div>
<div>54o</div>
<div>53o</div>
<div>52o</div>
<div>A4s</div>
<div>K4s</div>
<div>Q4s</div>
<div>J4s</div>
<div>T4s</div>
<div>94s</div>
<div>84s</div>
<div>74s</div>
<div>64s</div>
<div>54s</div>
<div>44</div>
<div>43o</div>
<div>42o</div>
<div>A3s</div>
<div>K3s</div>
<div>Q3s</div>
<div>J3s</div>
<div>T3s</div>
<div>93s</div>
<div>83s</div>
<div>73s</div>
<div>63s</div>
<div>53s</div>
<div>43s</div>
<div>33</div>
<div>32o</div>
<div>A2s</div>
<div>K2s</div>
<div>Q2s</div>
<div>J2s</div>
<div>T2s</div>
<div>92s</div>
<div>82s</div>
<div>72s</div>
<div>62s</div>
<div>52s</div>
<div>42s</div>
<div>32s</div>
<div>22</div>
</div>
<div class="carpetas">
<div class="botones">
<button id="principal_1">Redes Sociales</button>
<div class="resto" hidden>
<button>Facebook</button>
<button>Twitter</button>
<button>LinkedIn</button>
<button>Gooogle</button>
</div>
</div>
</div>
</div>
<div class="anuncios"></div>
<div class="pie"></div>
</div>
I hope this helps, the code for you to review in case you have doubts: https://jsfiddle.net/0kqzL6dn/37/
I'm trying to align the text within my h2 element. I would like it to be centered vertically within the div. I'm working in .NET MVC
My html: (this is the only part giving me trouble)
Specifically:
.banner-side-container {
height: 240px;
width: 180px;
vertical-align: middle;
}
.banner-side-container h2 {
margin: 0;
padding: 0;
text-align: center;
}
.view-teams-banner {
margin-top: 10px;
height: 110px;
width: 180px;
background-color: aqua;
border-radius: 20px;
}
.view-matches-banner {
margin-top: 10px;
height: 110px;
width: 180px;
background-color: darkorchid;
border-radius: 20px;
}
<td>
<div class="banner-side-container">
<div class="view-teams-banner">
<h2>View Teams</h2>
</div>
<div class="view-matches-banner">
<h2>View Matches</h2>
</div>
</div>
</td>
I've tried adding vertical-align: middle; to all 4 selectors with no success.
Further info: the text-align: center; worked perfectly.
You can use flex and add the following settings to the three elements wrapping the h2s and their parent elements as follows:
display: flex;
flex-direction: column;
justify-content: center;
.banner-side-container {
height: 240px;
width: 180px;
display: flex;
flex-direction: column;
justify-content: center;
}
.banner-side-container h2 {
margin: 0;
padding: 0;
text-align: center;
}
.view-teams-banner {
margin-top: 10px;
height: 110px;
width: 180px;
background-color: aqua;
border-radius: 20px;
display: flex;
flex-direction: column;
justify-content: center;
}
.view-matches-banner {
margin-top: 10px;
height: 110px;
width: 180px;
background-color: darkorchid;
border-radius: 20px;
display: flex;
flex-direction: column;
justify-content: center;
}
<td>
<div class="banner-side-container">
<div class="view-teams-banner">
<h2>View Teams</h2>
</div>
<div class="view-matches-banner">
<h2>View Matches</h2>
</div>
</div>
</td>
I don't know why the div on the left doesn't align vertically to center.
here is the html:
<body >
<div id="topH" class="vertCenter-flex">
<div id="profileBox" class="bgc-green divmain centerItems" >
<p>p1</p>
<p>p2</p>
<p>lala</p>
</div>
<div id="offers" class="bgc-blue divmain" ></div>
<div id="news" class="bgc-purple divmain"></div>
</div>
</body>
and here is the necessary css:
.bgc-blue{
background-color: #0066ff;
}
.bgc-white{
background-color: whitesmoke;
}
.bgc-purple{
background-color: purple;
}
.bgc-green{
background-color: rgb(70, 223, 70);
}
.vertCenter-flex{
display: flex;
align-content: center;
justify-content: center;
}
.divmain{
margin-top: 10px;
display: inline-block;
vertical-align: -webkit-baseline-middle;
height: 95%;
}
.centerItems{
text-align: center;
}
#topH{
width: 100%;
height: 95%;
}
#offers{
width: 40%;
margin-left: 10px;
margin-right: 10px;
}
#profileBox{
width: 30%;
height: fit-content;
}
#news{
width: 25%;
}
and this is the output. Again, i dont know what else can i do to center the left div vertically (#profileBox)
Use align-items: center; on the flex-container for that purpose.
.bgc-blue {
background-color: #0066ff;
}
.bgc-white {
background-color: whitesmoke;
}
.bgc-purple {
background-color: purple;
}
.bgc-green {
background-color: rgb(70, 223, 70);
}
.vertCenter-flex {
display: flex;
align-content: center;
justify-content: center;
align-items: center;
}
.divmain {
margin-top: 10px;
display: inline-block;
vertical-align: -webkit-baseline-middle;
height: 95%;
}
.centerItems {
text-align: center;
}
#topH {
width: 100%;
height: 95%;
}
#offers {
width: 40%;
margin-left: 10px;
margin-right: 10px;
background: #fa0;
height: 300px;
}
#profileBox {
width: 30%;
height: fit-content;
}
#news {
width: 25%;
background: #0fa;
height: 300px;
}
<body>
<div id="topH" class="vertCenter-flex">
<div id="profileBox" class="bgc-green divmain centerItems">
<p>p1</p>
<p>p2</p>
<p>lala</p>
</div>
<div id="offers" class="bgc-blue divmain">content</div>
<div id="news" class="bgc-purple divmain">content</div>
</div>
</body>
Change your css
.vertCenter-flex {
display: flex;
align-content: center;
justify-content: center;
align-items: center;
flex-direction:column;
}