Question 44265 in Html Question posted in
Some basic documentation can be found here.

Is there a way to center an element horizontally on a page while there is another element to the right? – Html

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.

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search