0

Any method I use to center the element does not work because the element on the right has a width to it, so the center element is always off center. I attached a picture to hopefully give a better idea of what I'm trying to accomplish.

The element I'm trying to center is an input field, here is the link to my project as well to give a more complete picture: https://weathervc.netlify.app/

header layout

I have tried countless variations of flexbox and grid to achieve this but the input element remains off center. I have also tried to take the element on the right out of flow, which kind of works, but it does not look good as the element stays stationary and will overlap the center element if the screen width is too small. Of course I could add media queries to constantly change the position but it looks ugly. I would like it to appear nice and responsive.

Perhaps this is not possible without taking an element out of flow? Any help is appreciated.

VictorCash
  • 1
  • 1

2 Answers2

0

Here is another implementation that relies on flexbox to accomplish the desired result. There is still the use of a 'spacer' on the left side to ensure that the space is divided properly. It also wont wrap but I'm not sure if you want it to wrap when the screen get's too small or not so I just left it as is.

header {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: baseline;
  width: 100%;
}

header>div {
  display: inline-block;
  width: 100%;
}

.search>form {
  display: flex;
}

.search>form>input {
  border-radius: 3px;
  flex: 1;
}

.buttons {
  display: flex;
  align-items: center;
}

.day-toggle {
  height: 24px;
  width: 24px
}
<header>
  <div class="spacer">
  </div>
  <div class="search">
    <form action="">
      <input class="location-search" type="text" />
    </form>
  </div>
  <div class="buttons">
    <button class="temp-format-toggle farenheit">C°</button>
    <span class="divider">&nbsp;|&nbsp;</span>
    <img class="day-toggle" id="day-toggle" src="https://cdn-icons-png.flaticon.com/512/3222/3222800.png" alt="Sun icon">
  </div>
</header>
Adam H
  • 1,750
  • 1
  • 9
  • 24
-1

Repeat the element that you have on the right on the left side as well, and make it invisible. That will give you the balance you are looking for.

.d1 {
  display: flex;
  justify-content: center;
  gap: 1em;
}
.d1>*:first-child {
  visibility: hidden;
}
.d2 {
  text-align: center;
}
<div class="d1">
  <div>123456789</div>
  <div><input placeholder="enter something"></input></div>
  <div>123456789</div>
</div>
<div class="d2">|</div>
Brett Donald
  • 6,745
  • 4
  • 23
  • 51
  • Thank you for this! So is it considered good practice to use an empty or invisible element? Or is this something I should do sparingly? – VictorCash Mar 09 '23 at 22:17
  • If it could be done without the invisible element, I would of course prefer that. But I'm happy to use this solution where necessary. You just need to be careful that it appears how you want it to on all screen sizes. You could always add a @media rule to set `display: none;` for a certain range of viewport widths if you find, for example, that the invisible element takes up too much space on smaller screens. – Brett Donald Mar 09 '23 at 22:24