Centering an item? (Search Bar)

Hi helpful friends.
How can I center this?
It looks different when logged in. It looks different after logging in.


Thank you. :pray:

Are you talking about the search input in the middle? (The panels below look centred already.)

If you are talking about centring the search bar in the viewport then the only option is to size the items on either side of that search bar to be the same size. There is presently no automatic way in css to centre an item irrespective of its content either side without moving elements form the flow (such as absolute positioning).

For the first image you could do it like this.

@media screen and (min-width:640px){
 .d-header .home-logo-wrapper-outlet,
 .d-header .panel{
        width:240px;
 }
}

Of course I don’t know if you are adding a different element on the right when you log in so you will need to make sure its width matches the width of the left element.

1 Like

Thank you for taking the time to help me.
Yes, this solves my problem, but the image on the site is distorted.
Instead, can we add margin to the left side of the icons that appear after logging in?

If you are talking about the logo image on the top left then the code I gave will have no effect on that image’s size.

I guess you must mean the right side when logged in but as I don’t have an account to login I can’t see it :slight_smile:

You probably could but you would need a negative margin in order to drag the searchbar over.

e.g.

@media screen and (min-width:640px){
 .d-header .panel{
  margin-left:-66px;
 }
}

You will need to adjust the 66px until its centred but as I can’t see the logged in version I can’t give you the correct measurement.:slight_smile:

I don’t want to waste any more of your time. I guess it won’t happen. It was like the snake game in Tetris. The two chase each other when I change the number (-66) there and save it. :smiley:

lol :slight_smile:

The best method is to have a width on both sides that match so you may need to adjust the login code so that you can do that without distorting your image.

Thank you so much again. :pray:
I’ll try some more. I hope I can handle it.

1 Like

@PaulOB Can you not use CSS Flexbox as below or am I missing something?

(Could use @media queries to improve layout on smartphones)

1 Like

Hi @Archibald Will the codes written here help me?

Yes that should work for @ogulcangulcemal 's use case. :slight_smile:

I didn’t mean it was impossible but its not straight forward and there are some caveats. If the left and right items had backgrounds that only covered their content you’d have to nest more elements to achieve the effect. If the left or right items have a fixed flex width then they don’t centre or if either the left or right is missing they won’t centre either.

There are workarounds for each but its not a natural one size fits all approach unfortunately. There are similar solutions in grid but in essence you have to stretch the 2 outer elements.

1 Like

My CodePen is intended only as a demonstration to show how CSS Flexbox can stretch the left and right containers equally while the middle container remains at constant width. I have not tried to copy all the styling of your header and in particular, just for the purposes of demonstration, I have not used SVG for the magnifying glass and ‘hamburger’.

The coding of your header looks very complicated so I am not able to say whether my demonstration may be helpful to you.

When emulating a small smartphone using Google Chrome, your header currently appears to be unsatisfactory:

centre-search

The header in my CodePen works on a small smartphone (by using flex-wrap: wrap;) but it is poor as it stands.

2 Likes