Tips for aligning an element at the center based on the viewport rather than the parent element

Question

Tips for aligning an element at the center based on the viewport rather than the parent element

I'm trying to center an element within a header with five elements, consisting of a button on the left, a logo in the middle, and three buttons on the right. I want the logo to be centered based on the viewport. I've created a codepen to demonstrate: https://codepen.io/pier6dev/pen/WNvjJGX

However, the logo does not align perfectly even when using justify content center. Here is where the logo should be positioned:

https://i.sstatic.net/ddM9B.png

If my explanation is not clear, feel free to ask any questions. Here is the CSS code snippet:

header {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 1rem;
}
.btn {
padding: 1rem;
border-radius: 0.5rem;
color: white;
}
...

<header>
  <div class="left">
    <div class="btn btn-home">Home</div>
  </div>
  <div class="center">
    <div class="logo">
      <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" ... </svg>
    </div>
  </div>
  <div class="right">
    <div class="btn btn-shop">Shop</div>
    <div class="btn btn-subscribe">Subscribe</div>
    <div class="btn btn-login">Login</div>
  </div>
</header>

css positioning display

Answer 1

Answer №1

Successfully resolved the issue by changing the .center class to an absolute element. To the logo, a specific width has been assigned.

.center {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 160px;
}

Visit codepen to view the solution

Answer 2

Successfully resolved the issue by changing the .center class to an absolute element. To the logo, a specific width has been assigned.

.center {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 160px;
}

Visit codepen to view the solution

Answer 3

Answer №2

The issue you may encounter is that the buttons on the right side will consume too much space, causing problems when the screen size is reduced. The <div class="right"> group needs sufficient space to be visible on smaller screens.

One potential solution, although it may lead to overflow problems, is as follows:

.left, .right {
   width: 20%; // or 25% (totaling 50% width)
}

.center {
   width: 50%; // remaining 50%
   display: flex;
   align-items: center;
   justify-content: center;
   // center the .logo container using flex
}

Alternatively, consider determining which elements or buttons are essential for smaller screens and implement a Sidedrawer or Pullout menu. You can refer to W3Schools for guidance on this: https://www.w3schools.com/howto/howto_js_sidenav.asp

Furthermore, utilize Media queries to specify when a 'Full' Header menu should be available based on screen width.

Two common Media queries include:

// Tablet Media Query for screens with a minimum width of 768px
@media screen and (min-width: 768px) {}

// Desktop Media Query for screens with a minimum width of 1024px 
@media screen and (min-width: 1024px) {}

Answer 4

The issue you may encounter is that the buttons on the right side will consume too much space, causing problems when the screen size is reduced. The <div class="right"> group needs sufficient space to be visible on smaller screens.

One potential solution, although it may lead to overflow problems, is as follows:

.left, .right {
   width: 20%; // or 25% (totaling 50% width)
}

.center {
   width: 50%; // remaining 50%
   display: flex;
   align-items: center;
   justify-content: center;
   // center the .logo container using flex
}

Alternatively, consider determining which elements or buttons are essential for smaller screens and implement a Sidedrawer or Pullout menu. You can refer to W3Schools for guidance on this: https://www.w3schools.com/howto/howto_js_sidenav.asp

Furthermore, utilize Media queries to specify when a 'Full' Header menu should be available based on screen width.

Two common Media queries include:

// Tablet Media Query for screens with a minimum width of 768px
@media screen and (min-width: 768px) {}

// Desktop Media Query for screens with a minimum width of 1024px 
@media screen and (min-width: 1024px) {}

Answer 5

Answer №3

Your logo's alignment is determined by the flexbox it resides in, not the viewport. Unfortunately, there is no way to make the logo disregard its parent container and center itself based on the viewport.

One workaround is to ensure that the .right and .left classes (which wrap the home and other buttons) have equal width. This will create a perfectly centered space between them. In the given example, I've used display: flex and justify-items: start for the .left class to prevent the home button from stretching and set the width to match the larger div indicated in the inspector. However, be aware that you might need to switch to a different layout early on using a media query because the logo can begin to overlap with the buttons when the viewport width reaches around 768px, which can appear awkward.

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 1rem;
}

.btn {
  padding: 1rem;
  border-radius: 0.5rem;
  color: white;
}

.btn.btn-home {
  background: red;
}

svg {
  width: 10rem;
  height: auto;
}

.left, .right {
  width: 272px;
  display: flex;
}
.left {
  justify-items: start
}
.btn.btn-shop {
  background: blue;
  margin-right: 1rem;
}

.btn.btn-subscribe {
  background: orange;
  margin-right: 1rem;
}

.btn.btn-login {
  background: grey;
}

<header>
  <div class="left">
    <div class="btn btn-home">Home</div>
  </div>
  <div class="center">
    <div class="logo">
      <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5573.1 1990.2" width="5573.1" height="1990.2">
        <style>
          .st0 {
            fill: #ed1c40
          }
        </style>
        <path class="st0"
          d="M3283.8 1072.6c-7.7 11.6-12.6..............145.9-171.2 18.5-226.6 49.7-264.3 107 116.7 11.5 193. ..............09 85 181.2-55.7 261.9-114.8 82.6-62.9 138.3-..............1 93.7-10.1 350.8 3 63 1.2 123.4-7.8 179..............6-39.6 28-15 .6 48.1-45.9 54.9- 77.4 10-42.7 5-79..............

Answer 6

Your logo's alignment is determined by the flexbox it resides in, not the viewport. Unfortunately, there is no way to make the logo disregard its parent container and center itself based on the viewport.

One workaround is to ensure that the .right and .left classes (which wrap the home and other buttons) have equal width. This will create a perfectly centered space between them. In the given example, I've used display: flex and justify-items: start for the .left class to prevent the home button from stretching and set the width to match the larger div indicated in the inspector. However, be aware that you might need to switch to a different layout early on using a media query because the logo can begin to overlap with the buttons when the viewport width reaches around 768px, which can appear awkward.

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 1rem;
}

.btn {
  padding: 1rem;
  border-radius: 0.5rem;
  color: white;
}

.btn.btn-home {
  background: red;
}

svg {
  width: 10rem;
  height: auto;
}

.left, .right {
  width: 272px;
  display: flex;
}
.left {
  justify-items: start
}
.btn.btn-shop {
  background: blue;
  margin-right: 1rem;
}

.btn.btn-subscribe {
  background: orange;
  margin-right: 1rem;
}

.btn.btn-login {
  background: grey;
}

<header>
  <div class="left">
    <div class="btn btn-home">Home</div>
  </div>
  <div class="center">
    <div class="logo">
      <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5573.1 1990.2" width="5573.1" height="1990.2">
        <style>
          .st0 {
            fill: #ed1c40
          }
        </style>
        <path class="st0"
          d="M3283.8 1072.6c-7.7 11.6-12.6..............145.9-171.2 18.5-226.6 49.7-264.3 107 116.7 11.5 193. ..............09 85 181.2-55.7 261.9-114.8 82.6-62.9 138.3-..............1 93.7-10.1 350.8 3 63 1.2 123.4-7.8 179..............6-39.6 28-15 .6 48.1-45.9 54.9- 77.4 10-42.7 5-79..............

Tips for aligning an element at the center based on the viewport rather than the parent element

Answer №1

Answer №2

Answer №3

Similar questions

Unable to find and load the specified css-font formats (svg, eot, woff, woff2, and ttf) using webpack

Adjustable dimensions for a collection of squares based on screen size

HTML textarea content will update automatically whenever there is an input change in JavaScript

Different option for animated side slider based on location

Arranging an image to appear directly underneath another image upon hovering the mouse over it

jQuery code tailored specifically for desktop use

How to eliminate the validation icon from a select tag in Bootstrap 5?

Angular click event not functioning properly on elements loaded via http request

Is it possible to partially move the image outside of the MUI dialog?

Easy selector for choosing jquery css backgrounds

Ways to position a dropdown submenu on the left-hand side in Bootstrap 4

Tips for using jQuery to dynamically apply CSS styles to new content added to a webpage

Customize the border style for the span element

Troubleshooting Bootstrap Column Display Issues on Mobile Devices

Create a dynamic calendar by integrating dates with Javascript and an HTML table

The width of table cells expands even when using the box-sizing property set to border-box

Unable to increase font size using CSS

Chrome fails to load webfont upon page initialization

What method is most effective for loading HTML content depending on the device being used?

When using font size in rem units, it will remain consistent across different screen sizes and not be subject to scaling