如何在引导程序中居中对齐输入组答案

【问题标题】：How to center-align input group in bootstrap如何在引导程序中居中对齐输入组
【发布时间】：2022-01-02 09:19:21
【问题描述】：

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

<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

如何解决此问题并将搜索栏置于中心位置？

【问题讨论】：

你尝试过 text-center 类吗？不确定它是否需要在元素或父元素上！
是的，我做到了，但没用。

标签： html css bootstrap-4

【解决方案1】：

您可以将iframe设为position: absolute，并将顶部和左侧置于0，然后将#over 元素position: relative 和display:flex 设置为justify-content: center，如果需要，可以使用top 定位进一步调整#over。

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>

【讨论】：

【解决方案2】：

这是因为#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>

【讨论】：