As I delve into the world of JavaScript, I find myself coding simple JS, HTML, and CSS snippets to enhance my learning experience. These exercises help me grasp the concepts well enough to create various JS web elements and projects. My goal is to eventually apply this knowledge to larger projects down the line.
In my current practice, I am utilizing the following CSS properties:
display: flex;
align-items: center;
/* AND */
justify-content: center;
I have applied these properties to the "body" in my CSS file, expecting it to automatically center elements both vertically and horizontally on the page. Despite not having conflicting CSS rules, I noticed that the elements were centered horizontally but not vertically.
Upon inspecting the element and manipulating the element.style within the <html lang="en"> tag by adding height: 100%;, I was able to achieve vertical centering. This workaround feels unnecessary as I believe elements should center without explicitly setting a height of 100% for the <html lang="en"> element.
This discrepancy has left me puzzled. I typically code using Visual Studio Code and preview the HTML file with the LiveServer extension. My recent focus on mastering Flexbox aligns with my newfound dedication to pursuing a career in coding post-online schooling.
Below is the snippet of my code which may shed some light on the situation:
body {
background-color: #dbdbdb;
display: flex;
align-items: center;
justify-content: center;
}
.arrows {
height: 70px;
}
/* .left-arrow {
display: flex;
align-items: center;
justify-content: center; */
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 50px;
}
.top {
display: flex;
align-items: center;
gap: 50px;
}<div class="container">
<div class="top">
<img src="images/left-arrow.svg" class="arrows arrow-left" alt="Left Arrow">
<div class="frame">
<div class="slider"></div>
</div>
<img src="images/right-arrow.svg" class="arrows arrow-right" alt="Right Arrow">
</div>
<div class="bottom"></div>
</div>
<script src="slider.js"></script>The slider.js file currently contains no code as I haven't progressed that far. Despite experimenting with different heights (100% vs. 100vh) across multiple CSS classes, the issue persists. I have even removed certain HTML and CSS elements in an attempt to troubleshoot, yet the mystery remains unsolved.