css使div中的两个输入居中
要使一个div中的两个输入框（例如<input>元素）居中，可以使用CSS的Flexbox布局。以下是一个示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Inputs in Div</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 使容器占满整个视口高度 */
border: 1px solid black; /* 可选：添加边框以便观察容器边界 */
}
.input-container {
display: flex;
gap: 10px; /* 输入框之间的间距 */
}
</style>
</head>
<body>
<div class="container">
<div class="input-container">
<input type="text" placeholder="Input 1">
<input type="text" placeholder="Input 2">
</div>
</div>
</body>
</html>解释
- 容器（
.container）：display: flex;：将容器设置为Flexbox布局。justify-content: center;：水平居中对齐子元素。align-items: center;：垂直居中对齐子元素。height: 100vh;：使容器占满整个视口高度，确保内容在视口中居中。
- 输入框容器（
.input-container）：display: flex;：将输入框容器也设置为Flexbox布局，以便水平排列输入框。gap: 10px;：设置输入框之间的间距。
应用场景
这种布局方式适用于需要在页面中心放置多个输入框的场景，例如登录表单、搜索栏等。
参考链接
通过这种方式，你可以轻松地将两个输入框居中对齐，并且可以根据需要调整间距和其他样式。
相关·内容
5回答
为什么这些按钮不能居中并排显示？ 它们并排堆叠在一起，但一直向左堆叠。红色边框是一条2px的实线。按钮似乎就在红色边框线的正下方。按钮应该在边框中。我可以让按钮居中，但它们会堆叠在一起，一个接一个。我要么把一个放在另一个的上面并居中 -或者- 并排一直到左边。 另一个音符，如果重要的话。</div>
<div style="float:left; width: 50%; border:1p
浏览 41提问于2016-09-27得票数 0
回答已采纳
5回答
我有以下代码： <p>Test<p><span style="color: Green">▼</span>这是一个非常简单的问题，我想，但我不知道CSS。如何使段落显示为水平居中对齐？
浏览 8提问于2011-06-11得票数 3
回答已采纳
除了使用display: inline-block和text-align:center之外，我们还需要在div包装器中创建2个div的中心吗？我不想让我的文本居中。
浏览 0提问于2012-09-16得票数 0
我想用jQuery在我的网站上重新定位一个div。我该怎么做呢？我是jQuery的新手，对于这个简单的问题，我很抱歉。
谢谢!
浏览 1提问于2011-01-05得票数 1
回答已采纳
我有一个居中的div，它在一行中包含标题、输入和按钮。我希望使输入字段展开，以便div内容的总宽度占据分配给div的整个宽度。有没有什么CSS方法可以指定像width: 100%-other_elems这样的东西？
浏览 0提问于2017-03-30得票数 0
5回答
如何使此表单居中？无论我尝试过什么(围绕div类、样式等进行更改，它仍然没有居中)。 我尝试过使用flex box和其他工具，但不管我做什么，如果有东西居中，输入字段就会留在最左边。 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.mi
浏览 68提问于2021-06-23得票数 0
回答已采纳
2回答
在这个网站中，我制作了，我在每边添加了两个小的class=，这样我就可以将一个div div“6U”居中。<div class="row"> <div class="6u"><img src="images/log
浏览 0提问于2016-02-17得票数 0
我想让元素的中心位于页面的中心。border-radius:25px; border-color:white;}
如果该元素中的文本足够长(足以超过max-width:70%;)，则该元素在页面上的居中位置与我希望的位置完全相同。但是，如果此元素中的文本未超过此最大宽度，则该元素将在左侧留出15%的边距。不久前，当我试图旋转一个元素
浏览 1提问于2021-11-29得票数 0
3回答
在我的网站的“联系我”部分下，为什么我的锚标签比它们包含的图片小(在下面)？另外，我一直在尝试让这两个图标在锚点所在的p标记中垂直居中。
浏览 1提问于2010-12-07得票数 5
回答已采纳
1回答
在下面的示例中，我试图用一个.centered类将包含数字的div居中，但它没有居中。我如何使它们居中，使它们坐在行的中间而不是左边？CSS： margin: 0 auto;DIVs： <div id="83" class="square c
浏览 3提问于2018-03-07得票数 2
5回答
我要做的是创建一个输入字段，并将其放在页面的中心。我已经设法做到了这一点，但它看起来像是一个输入框在另一个输入框的顶部，它没有注意到我给它的样式规则。下面是它看起来的样子：显然，黑色和灰色的框应该是输入框。下面是HTML：.styles{
height:30p
浏览 0提问于2013-08-17得票数 0
我试图在已知大小的div中对未知大小的图像进行居中，使图像在div内垂直和水平地居中，并且图像的高宽比不被扭曲。" id="c2"> </div>CSS； text-align:
浏览 8提问于2010-11-28得票数 1
4回答
具有等宽标签的居中对齐窗体
、、、、
我有一个非常简单的web表单，它由标签和输入字段组成，但是我似乎找不到一种方法来将表单在页面的中心对齐，并使标签具有相等的宽度，以便它们整齐地紧邻显示，一个在另一个下面。我的页面结构基本上是：<div class="form"><fieldset>
<label>Mobile:</label><inpu
浏览 0提问于2010-04-16得票数 0
回答已采纳
我有一个输入框和一个按钮。我希望按钮坐在所有devices > 768 px输入框的右边。
如何将col-xs-12 div的内容集中起来？我尝试过center-block和col-centered引导CSS类，这两个</
浏览 6提问于2016-01-12得票数 5
3回答
我做了正确的div堆栈，但孩子们没有居中。具体来说，我使用的是一个画布和另一个可以作为输入层的div。我在画布上有输入层，并占据整个屏幕，而我希望画布居中(输入层也可以居中，但它占用了整个屏幕，所以不应该有太大变化。我不知道高度和宽度的原因可能也很好，因为这是一个响应能力强的站点。只要最终以javascript、css3、html5为中心，它将是
浏览 1提问于2014-04-01得票数 0
回答已采纳
所以基本上我做了两个表单，这是登录和注册。在这两个表单中，都有一个下拉菜单。在登录页面中，我希望下拉菜单居中，在注册页面中，我希望它位于表单的左侧。下面是这两个下拉菜单的代码： <select class="user" name="">
<option disabled
浏览 26提问于2021-05-23得票数 0
回答已采纳
2回答
这是我正在做的小提琴：div#holder { top:0; left:0;
right: 0;
浏览 0提问于2013-02-20得票数 0
回答已采纳
我有两个不同的宽度和高度的图像，需要定位底部居中的图像框。下面是HTML和CSS示例。<div class="box"> <img alt="" src="image.jpg"/></
浏览 4提问于2013-11-21得票数 0
回答已采纳
2回答
我尝试将两个<p>元素垂直居中。我会尝试其他方法，但这里的大多数问题都指向那个教程。此代码段用于网页顶部的横幅。.banner { height: 69px; <div class=
浏览 0提问于2012-08-16得票数 16
回答已采纳
4回答
我希望把超链接放在一个不同的地方。如何将google.com链接移动到页面上的其他位置？<style type="text/css">{background-image:url('Koala.gif');} {h2text-align:center;}{font-size:200%;
浏览 4提问于2010-12-14得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
