如何在引導程式中居中對齊輸入組-有解無憂

我試圖對齊我的搜索欄，使其位于中心，但由于某種原因它保持在左側，這是我的代碼：

<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>

這就是它顯示的內容

如何解決此問題并使搜索欄位于中心？

uj5u.com熱心網友回復：

這是因為有一個position: absolute;on#over將其更改為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/[email protected]/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>

uj5u.com熱心網友回復：

您可以制作iframe position: absolute并將頂部和左側放置在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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/401323.html

標籤：html css bootstrap-4

上一篇：如何使用香草精為子元素設計樣式？

下一篇：MATLAB中的前向歐拉法