How to center-align input group in bootstrap-CodePudding

I was trying to align my search bar so its in the center, but for some reason it stays to the left, this is my code:

<head> 
 <style>
       html {
           overflow: auto;
       }
         
       html,
       body,
       iframe {
           margin: 0px;
           padding: 0px;
           height: 100%;
           border: none;
       }
         
       iframe {
           display: block;
           width: 100%;
           border: none;
           overflow-y: auto;
           overflow-x: hidden;
       }

       @media (min-width: 1200px) {
         .container{
             max-width: 400px;
         }
       }

     #over { font-size:5em; position:absolute; top:20px; left:20px; z-index:2 }
 </style>
</head>

<div id="over" >
 <div >
     <div id="over" >
       <input type="search" id="mapinput"  placeholder="&#1043;&#1086;&#1088;&#1086;&#1076;" aria-label="Search"
       aria-describedby="search-addon" />
       <button type="button" onclick="changecity();" >&#1055;&#1086;&#1080;&#1089;&#1082;</button>
     </div>
 </div>
</div>

<iframe id="mapframe" src="https://maps.google.com/maps?q=Moscow&t=k&z=13&ie=UTF8&iwloc=&output=embed" style="border: 0; width: 100%; height: 100%">Your browser doesn't support iFrames.</iframe>

And this is what it displays

How do I fix this issue and make the search bar in the center?

CodePudding user response：

It's because there is an position: absolute; on #over change it to relative and it should work just fine. See the CSS changes I made below.

#over {
    font-size: 5em;
    position: relative !important;
    top: 38px !important;
    z-index: 2;
}

<head> 
 <style>
       html {
           overflow: auto;
       }
         
       html,
       body,
       iframe {
           margin: 0px;
           padding: 0px;
           height: 100%;
           border: none;
       }
         
       iframe {
           display: block;
           width: 100%;
           border: none;
           overflow-y: auto;
           overflow-x: hidden;
       }

       @media (min-width: 1200px) {
         .container{
             max-width: 400px;
         }
       }

     #over { font-size:5em; position:absolute; top:20px; left:20px; z-index:2 }
 </style>
 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<div id="over" >
 <div >
     <div id="over" >
       <input type="search" id="mapinput"  placeholder="&#1043;&#1086;&#1088;&#1086;&#1076;" aria-label="Search"
       aria-describedby="search-addon" />
       <button type="button" onclick="changecity();" >&#1055;&#1086;&#1080;&#1089;&#1082;</button>
     </div>
 </div>
</div>

<iframe id="mapframe" src="https://maps.google.com/maps?q=Moscow&t=k&z=13&ie=UTF8&iwloc=&output=embed" style="border: 0; width: 100%; height: 100%">Your browser doesn't support iFrames.</iframe>

CodePudding user response：

You could make your iframe position: absolute and place the top and left at 0, then make your #over element position: relative and display:flex with a justify-content: center, further adjusting #over using top positioning if you desire.

html {
  overflow: auto;
}

html,
body,
iframe {
  margin: 0px;
  padding: 0px;
  height: 100%;
  border: none;
}

iframe {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  border: none;
  overflow-y: auto;
  overflow-x: hidden;
}

@media (min-width: 1200px) {
  .container {
    max-width: 400px;
  }
}

#over {
  font-size: 5em;
  position: relative;
  top: 3.5rem;
  display: flex;
  justify-content: center;
  z-index: 2;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>

<div id="over" >
  <div >
    <div id="over" >
      <input type="search" id="mapinput"  placeholder="&#1043;&#1086;&#1088;&#1086;&#1076;" aria-label="Search" aria-describedby="search-addon" />
      <button type="button" onclick="changecity();" >&#1055;&#1086;&#1080;&#1089;&#1082;</button>
    </div>
  </div>
</div>

<iframe id="mapframe" src="https://maps.google.com/maps?q=Moscow&t=k&z=13&ie=UTF8&iwloc=&output=embed" style="border: 0; width: 100%; height: 100%">Your browser doesn't support iFrames.</iframe>