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

Question

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

And this is what it displays这就是它所显示的

How do I fix this issue and make the search bar in the center?如何解决此问题并使搜索栏居中？

Answer 1

It's because there is an position: absolute;这是因为有一个position: absolute; on #over change it to relative and it should work just fine.在#over其更改为relative ，它应该可以正常工作。 See the CSS changes I made below.请参阅我在下面所做的 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

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.您可以使您的iframe position: absolute并将顶部和左侧放置在0 ，然后使您的#over元素#over position: relative和display:flex如果您愿意，可以使用top定位justify-content: center 。

 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 个解决方案

解决方案1
0 2022-01-01 23:30:55

解决方案2
0 2022-01-02 01:19:21

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

问题描述

2 个解决方案

解决方案1 0 2022-01-01 23:30:55

解决方案2 0 2022-01-02 01:19:21

解决方案1
0 2022-01-01 23:30:55

解决方案2
0 2022-01-02 01:19:21