Home > Mobile >  How to move the search bar to the center of the screen?
How to move the search bar to the center of the screen?

Time：01-06

This might be a stupid question, but I'm new. I think the problem is in the 'position' property. Already tried everything, the search box jumps from side to side. Maybe a bug in html

.header{
    position: relative;
    min-height: 900px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;

}

.header::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(180deg, #000000 1.38%, rgba(105, 0, 70, 0.38) 20.04%, #000000 100.0%);
}

/* .header_content{
    position: relative;
} */

.search{
    position:relative;
    margin: 0 auto;
}

.search_bar{
    font-family: 'Poppins';
    font-weight: 700;
    font-size: 17px;
    color: antiquewhite;
    line-height: 120%;
    padding: 15px 20px;
    border: 2px solid white;
    background-color:rgba(58, 58, 58, 0.38);
    width: 100%;

}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tall Lorenc</title>
    <script src="https://code.iconify.design/3/3.0.1/iconify.min.js"></script>
    <link rel="stylesheet" href="/css/style.css">
</head>

<body>
    <header id="welcome"  style="background-image: url('/img/header1.jpg');">
        <div >
            
        </div>
            <div >
                <div >
                    <div >
                        <div style="width: 700px;">
                            <div >
                                <input type="text"  placeholder="Which type of track are you looking for?">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
</body>

</html>

CodePudding user response：

.search {
    width: 100%;
    text-align: center;
}

CodePudding user response：

Try this HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tall Lorenc</title>
    <script src="https://code.iconify.design/3/3.0.1/iconify.min.js"></script>
    <link rel="stylesheet" href="/css/style.css">
</head>

<body>
    <header id="welcome"  style="background-image: url('/img/header1.jpg');">
        <div >
            
        </div>
            <div >
                <div >
                    <div >
                        <div >
                            <div >
                                <input type="text"  placeholder="Which type of track are you looking for?">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
</body>

</html>

CSS

.header{
    position: relative;
    min-height: 900px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}

.header::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(180deg, #000000 1.38%, rgba(105, 0, 70, 0.38) 20.04%, #000000 100.0%);
}

/* .header_content{
    position: relative;
} */

.search{
    position: relative;
  margin: auto;
  width:700px;
}

.search-wrapper{
  width:100%
}

.search_bar{
    font-family: 'Poppins';
    font-weight: 700;
    font-size: 17px;
    color: antiquewhite;
    line-height: 120%;
    padding: 15px 20px;
    border: 2px solid white;
    background-color:rgba(58, 58, 58, 0.38);
    width: 100%;
}

CodePudding user response：

I changed my answer, this should work!

.header{
    position: relative;
    min-height: 900px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;

}

.header::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(180deg, #000000 1.38%, rgba(105, 0, 70, 0.38) 20.04%, #000000 100.0%);
}

/* .header_content{
    position: relative;
} */

.search{
    position:relative;
    margin: 0 auto;
    text-align:center;
}

.search_bar{
    font-family: 'Poppins';
    font-weight: 700;
    font-size: 17px;
    color: antiquewhite;
    line-height: 120%;
    padding: 15px 20px;
    border: 2px solid white;
    background-color:rgba(58, 58, 58, 0.38);
    width: 90%;

}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tall Lorenc</title>
    <script src="https://code.iconify.design/3/3.0.1/iconify.min.js"></script>
    <link rel="stylesheet" href="/css/style.css">
</head>

<body>
    <header id="welcome"  style="background-image: url('/img/header1.jpg');">
        <div >
            
        </div>
            <div >
                <div >
                    <div >
                        <!-- <div style="width: 700px;"> -->
                            <div  >
                                <input type="text"  placeholder="Which type of track are you looking for?">
                            </div>
                        <!-- </div> -->
                    </div>
                </div>
            </div>
        </div>
    </header>
</body>

</html>

CodePudding user response：

I think you need to learn more HTML and CSS, so that you can understand what's really going on.

Now, with your current set up, the simplest thing you can do is this:

.header_content {
  display: flex;
  justify-content: center;
}

I tried this out, and maybe I don't have all of your CSS, but I couldn't figure out why it was pushed slightly to the right. Either way, if this .header_content container correctly fits its parent, then you should be good to go, because the children of .header_content centered correctly.

Since I don't understand your full setup, this may not be helpful to you, but I think you've overcomplicated your HTML. This is all you should need, from my understanding:

<!-- index.html -->

<header>
  
  <div >
    Content
  </div>
  
  <div >
    <input type="text"  placeholder="Which type of track are you looking for?">
  </div>
  
</header>

/* styles.css */

/* You may consider switching your rgba()'s to the modern syntax. No "a" in rgb, and no commas. Just a "/" to seperate the alpha value. I changed them in my example, as you can see. */

header {
  background-image: linear-gradient(180deg, #000000 1.38%, rgb(105 0 70 / 0.38) 20.04%, #000000 100.0%); /* I'm not sure if this was it's intended use, since you had it in a ::before element, but this looked more correct in my testing. */
  display: grid; /* You could also do display: flex, but I think this may be more accurate to your needs. */
  grid-template-columns: 1fr 2fr 1fr; /* This will make sure your search bar (the second element in the grid), will always take up the majority of the space, while the sides remain even. */
  place-items: center; /* This ensures each grid item is placed in the center of it's section. */
}

/* This styling isn't necessary to complete your task */
.container {
  display: grid;
  place-items: center;
  color: white;
  font-family: sans-serif;
}

/* This ensures our search container sizes properly. You may also consider the commented out width value instead. */
.search {
  width: 100%;
  min-width: 325px; /* This ensures the search bar never cuts out the placeholder text. */
  /* width: 325px; */
}

.search_bar {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: antiquewhite;
  /* line-height: 120%; I don't think this is necessary. */
  padding: 15px 20px;
  border: 2px solid white;
  background-color: rgb(58 58 58 / 0.38);
  width: 100%;
}

You'll notice in this example, that the search bar is technically a few pixels to the right, since we don't have any content on the right of it. If we were to remove the .container div with the Content text, it would work best with a display: flex; justify-content: center; instead of display: grid;. I'm just not sure what you full use case is.

Now let's say you want to guarantee it's always 100% center, no matter what kind of content you have around it... (I wouldn't recommend this in most cases, but perhaps it will help in your use case) With my HTML, just change the CSS to this:

/* styles.css */

/* This line below I do in every project, because it makes the sizing and positioning as I expect it to be, rather than chosen by the browser which is different depending on the element. */
*,
html,
body {
  position: relative;
  box-sizing: border-box;
}

header{
  background-image: linear-gradient(180deg, #000000 1.38%, rgb(105 0 70 / 0.38) 20.04%, #000000 100.0%);
  padding: 1rem;
  display: flex;
}

/* This styling isn't necessary to complete your task */
.container {
  display: grid;
  place-items: center;
  color: white;
  font-family: sans-serif;
}

.search {
  width: 370px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* If you also want it vertically aligned to the center, uncomment the below lines and remove the above transform */
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.search_bar {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: antiquewhite;
  padding: 15px 20px;
  border: 2px solid white;
  background-color: rgb(58 58 58 / 0.38);
  width: 100%;
}

Once again, I think that these kinds of things just require more HTML and CSS knowledge. I'm sure you'll grow to understand this stuff in time. I hope this helps.

CodePudding user response：

a better way of doing this is using flex

html, body{
margin:0;
padding:0;
}

.container{
display:flex;
height:100vh;
background-color:lightgreen;
justify-content:center;
align-items:center;

}
<div class='container'>
    <input type='text'>
</div>

CodePudding user response：

.header {
  position: relative;
  min-height: 900px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}

.header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(180deg, #000000 1.38%, rgba(105, 0, 70, 0.38) 20.04%, #000000 100.0%);
}


/* .header_content{
    position: relative;
} */

.search {
  position: relative;
  margin: 0 auto;
  top:45%;
  left:0%;;
  
}

.search_bar {
  font-family: 'Poppins';
  font-weight: 700;
  font-size: 17px;
  color: antiquewhite;
  line-height: 120%;
  padding: 15px 20px;
  border: 2px solid white;
  background-color: rgba(58, 58, 58, 0.38);
  width: 100%;
}
HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tall Lorenc</title>
  <script src="https://code.iconify.design/3/3.0.1/iconify.min.js"></script>
  <link rel="stylesheet" href="/css/style.css">
</head>

<body>
  <header id="welcome"  style="background-image: url('/img/header1.jpg');">
    <div >

    </div>
    <div >
      <div >
        <div >
          <div style="width: 700px;height:100vh;margin:0 auto;border:solid 5px orange;">
            <div >
              <input type="text"  placeholder="Which type of track are you looking for?" style="width:656px;">
            </div>
          </div>
        </div>
      </div>
    </div>    
  </header>
</body>

</html>

Page link：https//www.codepudding.com/Mobile/663810.html

Prev:Overflow Scroll Adding Line at Bottom of Screen
Next:Why are the margins not working properly?
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding