如何在 bootstrap 中居中对齐输入组

Question

我试图对齐我的搜索栏，使其位于中心，但由于某种原因它保持在左侧，这是我的代码：

<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" class="container">
 <div class="row">
     <div id="over" class="input-group bg-white">
       <input type="search" id="mapinput" class="form-control rounded" placeholder="&#1043;&#1086;&#1088;&#1086;&#1076;" aria-label="Search"
       aria-describedby="search-addon" />
       <button type="button" onclick="changecity();" class="btn btn-outline-primary">&#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>

这就是它 displays

如何解决这个问题并使搜索栏居中？

Answer 1

这是因为 #over 上有一个 position: absolute; 将其更改为 relative，它应该可以正常工作。请参阅我在下面所做的 CSS 更改。

#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/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<div id="over" class="container">
 <div class="row">
     <div id="over" class="input-group bg-white">
       <input type="search" id="mapinput" class="form-control rounded" placeholder="&#1043;&#1086;&#1088;&#1086;&#1076;" aria-label="Search"
       aria-describedby="search-addon" />
       <button type="button" onclick="changecity();" class="btn btn-outline-primary">&#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>

Answer 2

您可以创建 iframe position: absolute 并将 top 和left at 0，然后使 #over 元素 position: relative 和 display:flex 带有 justify-content: center，进一步调整 #over 如果需要，使用 top 定位。

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" class="container">
  <div class="row">
    <div id="over" class="input-group bg-white">
      <input type="search" id="mapinput" class="form-control rounded" placeholder="&#1043;&#1086;&#1088;&#1086;&#1076;" aria-label="Search" aria-describedby="search-addon" />
      <button type="button" onclick="changecity();" class="btn btn-outline-primary">&#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>

如何在 bootstrap 中居中对齐输入组

How to center-align input group in bootstrap

html

css

bootstrap-4