如何将输入框图标高度更改为居中？
要将输入框图标的高度更改为居中，可以通过以下步骤实现：
- 首先，确保你的输入框图标是以图标字体的形式呈现的，而不是作为图片或背景图。
- 使用CSS样式来修改图标的高度和垂直对齐方式。可以通过以下两种方法之一来实现：
a. 使用line-height属性来设置输入框的高度，并将其与图标的高度相等。例如，如果图标的高度为20px，可以将line-height设置为20px。
b. 使用flex布局来垂直居中图标。将输入框和图标包裹在一个容器元素中，并将容器元素的display属性设置为flex，然后使用align-items属性将图标垂直居中。例如，可以将容器元素的样式设置为：display: flex; align-items: center;
- 根据具体的开发环境和框架，可能需要调整其他相关样式，如padding、margin等，以确保图标在输入框中居中且与文本对齐。
以下是一个示例代码片段，演示如何将输入框图标高度更改为居中：
<!DOCTYPE html>
<html>
<head>
<style>
.input-container {
display: flex;
align-items: center;
}
.input-container input {
line-height: 20px; /* 或者根据实际图标高度设置 */
}
</style>
</head>
<body>
<div class="input-container">
<input type="text" placeholder="请输入内容">
<span class="icon">图标</span>
</div>
</body>
</html>请注意，以上代码只是示例，具体的实现方式可能因项目需求、框架和样式库的不同而有所变化。对于具体的开发环境和框架，建议查阅相关文档或使用相应的样式库来实现输入框图标的居中效果。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
- 腾讯云物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
- 腾讯云区块链（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云元宇宙（Metaverse）：https://cloud.tencent.com/product/metaverse
相关·内容
2回答
居中输入框和图标按钮
、、、
我希望输入框和图标按钮都垂直居中。我尝试了flexbox justify content和align-content，但它仍然不起作用。在css中有什么方法可以做到这一点吗？谢谢。
浏览 16提问于2017-01-07得票数 2
回答已采纳
我想让我的文本字段有一个清晰的按钮。我找到了一个如何使用装饰添加它的示例，但它的位置完全不正确。如何调整图标的位置？
另外，我不能让输入文本在输入字段中居中。我没有找到任何如何在输入框中垂直居中文本的方法。
谢谢!
...
TextEditingController _textFieldController = TextEditingController();
...
Widget searchField(BuildContext context) {
return Container(
width: 200,
height: 30,
color: Colors.
浏览 5提问于2019-07-11得票数 1
4回答
我有一个简单的标签和一个数字输入框：
其代码如下：
<div id="total"><label>Total: <input type="tel" id="totalInput" onKeyUp="updateTotal()" /></label></div>
和css：
label {
font-size: 16pt;
font-family: sans-serif;
margin-right: 0.5em;
}
input {
浏览 1提问于2011-07-28得票数 2
回答已采纳
2回答
我在我的应用程序中成功地显示了一个图标，account_circle图标，使用的是角材料2.0.0-beta.3，如下所示：
<md-icon>account_circle</md-icon>
我在我的应用程序中包含了<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">。
但是，使用md类增加图标大小的推荐方法似乎都不起作用。如何在不使用字体大小的情况下更改大小？如何将颜色更改为与输入框占位符相同的颜色？
更
浏览 2提问于2017-04-27得票数 1
我正在尝试将搜索图标按钮放入搜索输入框中(使用Bootstrap)
虽然在桌面分辨率下一切正常，但在非桌面分辨率下，当菜单项合并为下拉菜单时，按钮和输入框处于两个极端。
像这样：
我在这个问题上做了一个手脚：
应该怎么做才能让按钮和输入框始终保持在一起？(同样重要的是搜索框要居中对齐:它不能左对齐或右对齐)
浏览 1提问于2014-09-12得票数 0
1回答
我使用输入框前面的输入组插件。在修复它的同时，附加组件的高度比盒子的高度略高。如何将插件固定到输入框的大小？
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">
<i class="icon-home"></i>
浏览 3提问于2014-03-14得票数 0
我们的表单需要更大的文本输入，所以很简单，我们只需要设置它们的高度……但Firefox3.5会将文本保留在顶部。如何将其垂直居中？在Firefox3.6、IE8、Chrome和Safari上，文本像我希望的那样垂直居中。
<form>
<input type="text" style="height: 50px"/>
</form>
如何使此表单中的文本在其输入框中居中？
浏览 1提问于2010-09-23得票数 1
1回答
我需要制作一张卡片，我已经制作了一个div，一个图像和一个文本，但我不知道如何将它们垂直居中。这是我的卡片的样子： ? 它应该是这样的： ? 下面是div的代码： <div class="panel mx-auto col align-items-center">
<img class="atajo-content" :src="shortcut.img" height="83" />
<p class=
浏览 30提问于2021-04-23得票数 1
回答已采纳
我需要在div中对消息进行居中，就像父div有100%的宽度，并且水平地对消息进行居中是没有问题的。此外，如您所见，图标也是垂直居中的，但我不能垂直地将文本居中。到目前为止，我应用到该div的唯一css是
.content {
height: 100% ;
display: inline-block ;
}
对于为什么消息div在.container中向下移动的任何建议。这是正确的跨浏览器方法吗？
浏览 8提问于2013-09-20得票数 1
回答已采纳
我有一个div元素，我想在页面中间居中，但是当我添加transform: scale(3)时，它不再是居中的了。div的宽度和高度为112 to，我不想使用position或left/right/top/bottom。
body {
display: flex;
justify-content: center;
align-items: center;
}
.scale {
transform: scale(3);
}
div {
width: 112px;
height: 112px;
background: #333;
}
<body>
&l
浏览 1提问于2022-07-27得票数 1
我有一个带有图标的QTableView，默认情况下，这些图标显示左对齐，而我想让它们居中对齐。从Qt文档中可以看出，对齐只发生在Qt.role下的TextAlignment上，它具有Qt.DisplayRole()的角色。
如何将具有Qt.DecorationRole()的图标设置为居中。
<code>B0</code>
浏览 110提问于2020-07-31得票数 1
回答已采纳
1回答
再次感谢那些能帮助我解决看似简单的问题的人！我就是想不通。我正在创建一个注册页面，其中包括两个区域。我希望这些输入区域是内联的图标，当它检查数据库时出现。
我已经把所有东西都设置好了，我想我的html是合适的。我已经创建了一行，其中既包含输入框，也包含从互联网上获得的whirly loader。唯一的问题是，当我运行它时，whirly loader太大了，与输入框不完全一致。
下面是我的html：
<div class="row">
<div class="col-xs-10">
<input type="t
浏览 0提问于2015-08-21得票数 0
UIBarButtonItems的水平定位是没有问题的，我可以简单地用固定/灵活的空间项目填充空间。但是，我似乎不能垂直调整工具栏项。UIToolbar没有对齐属性，并且UIBarButtonItem无法设置其框架。
我需要这样做，因为我们混合使用了使用initWithImage创建的自定义图标和使用initWithBarButtonSystemItem创建的标准图标。自定义图标没有正确居中(相对于系统图标，它们向上偏移，居中正确)，因此工具栏看起来很笨拙。
浏览 1提问于2010-05-07得票数 24
我有以下数据视图，并希望显示尽可能多的图标，以适应在一行。但是，每行只显示一个图标。我可以做些什么来改变这种行为？
另外-如何将图片下方的文本居中？
Ext.define('EMS.view.application.IconView', {
extend: 'Ext.view.View',
alias: 'widget.application.IconView',
xtype: 'iconView',
itemId: 'iconView',
layout: 'fit',
tpl: ['
浏览 5提问于2014-09-05得票数 0
我有一个输入框和一个按钮。我希望按钮坐在所有devices > 768 px输入框的右边。
对于devices <=768 px，我希望按钮位于输入框下面，输入框对齐在col-xs-12的中心。
这是我迄今为止的尝试：
<form id="signup-form" class="new_invitation" action="/invitations" accept-charset="UTF-8" method="post">
<div class="col-sm-4 co
浏览 6提问于2016-01-12得票数 5
1回答
首先，我想在一个按钮内垂直和水平地对一个图标进行居中。到目前为止，我尝试了CSS属性position: relative;和position: absolute;，请参阅，但它不能工作。
其次，当我调整窗口大小时，由于white-space: normal;属性，按钮可以成为两个文本行的高度。我如何实现，在这种情况下，图标按钮将更新他的高度和图标仍然是居中(水平和垂直)。
<div class="container">
<div class="row">
<div class="col-md-2
浏览 6提问于2016-04-22得票数 2
回答已采纳
我使用的材料设计图标浮动动作按钮。现在我想使用一个自定义图标。我从一个SVG文件中生成了一个字体，该字体使用的是颤振-图标生成器()。一切都进行得很好，但图标没有居中。
在这里，最小化的屏幕截图，欧元-图标是居中的，另一个(定制的)不是：
FloatingActionButton的相应代码是：
Widget money() {
return Container(
child: FloatingActionButton(
backgroundColor: widget.openColor,
elevation: 0,
浏览 0提问于2019-06-23得票数 2
回答已采纳
5回答
所以这看起来很基础，但我搞不懂。我有一个ListTile，它有一个前导复选框、一个标题和一个尾随图标。随着上一次颤动更新，复选框和图标由于某种原因不再居中。我想让它们垂直居中。我尝试以各种方式将Center()、Align()、Expanded()和Flexible()添加到复选框中，但它只是将标题推出屏幕或什么也不做。
有什么建议吗？任何帮助都是非常感谢的。
ListTile(
leading: Checkbox(
value: item.checked,
onChanged: (bool newValue) {
浏览 0提问于2019-03-15得票数 26
我发现“颤栗”有一种特定的方式，它能让你看起来很容易的东西，并让你发疯，试图弄清楚它。在我的例子中，我需要一个Column中的全宽度节头。该部分需要有一个白色的背景，一个居中的文本标题和一个按钮在右边。就像这样：
然后我遇到了一些问题：
如何将文本居中并对齐按钮？如何将容器大小调整到文本。和图标，但不是按按钮的大小，因为它使面积太大？
这是我目前的情况：
return Container(
color: theme.cardColor,
// constraints: BoxConstraints(minWidth: double.infinity),
浏览 3提问于2021-01-31得票数 0
回答已采纳
1回答
这就是我所拥有的： frame = input("Enter frame character ==> ")
print(frame)
height = int(input("Height of box ==> "))
print(height)
width = int(input("Width of box ==> "))
print(width)
print("Box:")
print(frame*width)
print(frame + " "*height + frame)
space =
浏览 28提问于2021-01-19得票数 0
回答已采纳
2回答
柔性箱立式中心第一项固定
、、、
我得到了一个div，它包含一个FontAwesome图标和一个简短的文本。
.box{
display:flex;
align-items: center;
justify-content: center;
}
<div class="box">
<i>Icon</i>
<p>Text</p>
</div>
当文本达到一定的长度时，它会转到下一行，图标向上移动，所有的东西都是居中的。
当我有多个这样的.box div，并排的时候，我希望图标保持对齐，不管下面的文本得到多长时间。
浏览 3提问于2020-02-12得票数 0
3回答
这是我的。
twitter图标旁边有"follow us“链接。我想要的是链接是垂直居中的图像使用css没有内联样式，如果可能的话。
我尝试将类直接添加到<a>标记中，然后调整边距。但这并不管用。
我尝试将类直接添加到img标记中，然后调整边距。但这并不管用。
我再次尝试做这两件事，调整填充而不是边距。
这是否可能是我设置它的方式，或者我必须同时更改html和..or？
任何建议都是非常感谢的！
浏览 0提问于2012-08-13得票数 0
回答已采纳
我是CSS的新手，我创建了一个呼叫目录，在左侧显示一个图标和旁边的人的名字。在下一行中，我将打印他的电话号码。电话号码居中对齐，但名称并不总是对齐。
为了使其居中，我将所有内容包装在一个div中
<div class="container thumbnails" id="all1" tabindex="5000" align="center">
</div>
我创建了一个jsfiddle：
当那个小图标将人名推到右边时，我如何将人名居中？
浏览 3提问于2014-04-29得票数 0
这似乎是一个非常基本的问题，但我在任何地方都找不到答案。在下图中，“进度表”一词在一个跨度内。蓝色框不是CSS的一部分，它是Firebug高亮矩形，显示外部跨度的尺寸。
下面是HTML：
<span class="caption">
<span class="green">Schedule</span>
</span>
我还做了一个。
在任何一个跨度上都没有填充或边距，只是一些大小和颜色信息。字体大小为48 up，但跨度高度计算为65 up，文本在此范围内垂直居中，导致文本顶部与时钟图标不对齐，时钟图
浏览 4提问于2012-10-10得票数 1
回答已采纳
我已经用tumblr建立了我的博客doopist.com。
我正在尝试将twitter关注按钮和Facebook点赞按钮与我的博客标题徽标图像排成一条线。目前，Twitter图标在顶部横幅的顶部对齐，而FB按钮更接近居中。我尝试将按钮垂直居中，类似于徽标居中的方式。
我不太了解CSS，我试着做一个垂直居中对齐的div风格，但这导致了tumblr图标的标志(随机帖子，档案等)跳到一个新的行，这不是我们想要的。
我很好奇是否有人有关于如何将Twitter和FB按钮垂直居中的建议。非常感谢您的时间和帮助。
浏览 0提问于2013-03-08得票数 1
1回答
当我把字体变大时，垫图标不再居中。如何将按钮内部的图标垂直和水平居中？(请注意，类"mat-icon“是内置的，因此css可以在元素中指定类) html： <button mat-fab class="add-picture">
<mat-icon>add_to_photos</mat-icon>
</button> css： .add-picture {
width:100px;
height:100px;
}
.mat-icon {
font-size: 80px;
}
浏览 12提问于2021-08-17得票数 0
回答已采纳
6回答
我试图对文本和图标进行居中，但是图标设置在背景中。
如何将文本居中，并将图标设置在文本的左侧。
下面是小提琴和代码：
<div class="error divError" style="text-align: center">
<p class="errorplaceholder">Error Text</p>
</div>
.divError {
background: url("https://www2.eiffel.com/down
浏览 8提问于2014-01-31得票数 1
回答已采纳
2回答
我用Align.CENTER设法使文本水平居中，但它不能垂直居中。
paint.setTextAlign(Align.CENTER);
canvas.drawText(text, fx, fy, paint);
如何将文本垂直居中？
浏览 147提问于2019-03-31得票数 1
回答已采纳
3回答
我有一个div，它需要通过用css更改边距顶部来垂直居中。这个div将是动态的，我希望避免position:absolute.
HTML：
<div class="container">
<div class="exp">
<p>content</p>
<p>content</p>
</div>
</div>
jQuery：
var cHeight = $('.container').height();
浏览 1提问于2013-08-01得票数 0
2回答
对齐图像按钮和输入框
、、、
我正在尝试将我的图像按钮与输入框对齐(相对水平居中)，但无法使其正常工作。我在网上看到的所有示例都使用单个图像，而不是翻转图像设置……
<body background="Images/Main_Background.png">
<center>
<a href="#"
onclick="this.href = ('file:///V:/' + document.getElementById('prog_site').value + '/Tekeningen/Tekenwer
浏览 1提问于2013-11-19得票数 0
我有一个带有图像和标签的自定义UserControl，它们都是在设计时在XAML中设置的，如下所示：<controls:HomeBarButton Icon="/SuCo;component/Resources/music.png" Text="music"/>
当控件只有一个图标时，它看起来很好。当我添加Text属性时，图标在设计时和运行时都消失了，文本标签忽略了UserControl中设置的格式，当标签居中时，控件左上角只显示为黑色。
相关的UserControl XAML：
<StackPanel HorizontalAlignm
浏览 5提问于2009-03-26得票数 1
回答已采纳
我使用图像作为图标，而不是字体可怕。我正试图使用css缩小图像的大小。
这是我的代码：
.sign_up_name {
background: url(../images/name.png) no-repeat scroll 11px 13px #f2f2f2 !important;
}
<input type="text" class="form_control_field form-control-sign sign_up_name" placeholder="Name">
当我试图向类名添加宽度时，它减少了整个输入框
浏览 3提问于2021-09-18得票数 1
回答已采纳
我目前正在练习我的响应式设计技能，并且遇到了一个我不能理解的错误。当设备屏幕低于768px时，我希望它显示图标，而不是正常的导航栏。我希望这些图标垂直居中。然而，当我在全屏幕上运行下面的代码时，导航栏是垂直居中的，但当你缩小到移动大小时，图标不是垂直居中的。任何帮助都将不胜感激。
HTML：
<!DOCTYPE html>
<html>
<head>
<title>Colmar Academy</title>
<link rel="stylesheet" type="text/css&#
浏览 0提问于2018-09-27得票数 0
我正在创建一个高度大于默认高度的搜索字段。虽然它的文本大小可以增加到适当的大小，但图标的大小保持不变： ? 我试图通过覆盖NSSearchField的rectForSearchButton(whenCentered:)的默认矩形来解决这个问题，然而，它不仅没有增加按钮的大小，而且还复制了按钮的图像。 override func rectForSearchButton(whenCentered isCentered: Bool) -> NSRect {
return NSRect(x: 10, y: 10, width: 30, height: 30)
} ? 然
浏览 12提问于2020-01-08得票数 0
这个问题已经困扰了我一段时间了，我试着研究它，但到目前为止，我只是打开了一些网站，告诉我如何将东西居中，但这不是问题所在。问题是，虽然#content看起来像是居中，但当页面占据多个屏幕时，当#content的高度小于一个屏幕时，它会导致#content出现在显示位置左侧约5px的位置。有没有办法解决这个问题，而不强迫我的较短的页面到达屏幕底部或更远的地方？
下面是我如何将我的内容居中：
body {
margin: 0;
padding: 0;
}
#content {
width: 800px;
margin: 0 auto;
overflow: hidden;
padd
浏览 0提问于2011-08-27得票数 0
回答已采纳
1回答
嗨，我需要帮助，在我的商店前网页上的几张图片对中。
我需要帮助，在页面底部的3个圆圈(而不是社会图标)。我不知道如何使图像在圆圈中居中。
请帮帮忙
浏览 1提问于2015-01-28得票数 0
回答已采纳
3回答
使用绝对定位使div居中
、、、
我知道这可能已经被问了一百万次了，但是我如何将一个有绝对位置的div居中呢？
我试过了，但它没有居中。
您可以查看站点密码:springy88
#logo{ position:absolute; width:243px; left: 50%; margin-left: 121.5px; }
浏览 1提问于2012-03-12得票数 4
回答已采纳
9回答
CSS垂直对齐
、、
我在浮动的div中有一个img，我不知道如何将它垂直居中。
<div style="height: 300px">
<img style="height: 50px" src="something" />
</div>
垂直对齐:中间对齐当然不起作用。
浏览 3提问于2011-01-25得票数 12
回答已采纳
下面是我的简化代码：
<View style={{flexDirection: "row", width: 200}}>
<View style={{borderWidth: 2, flex: 1, height: 100}}>
<Text>flex: 1, height: 80</Text>
</View>
<View style={{borderWidth: 2, width: 100, height: "100%", justifyContent:
浏览 18提问于2018-03-05得票数 1
1回答
我有各种各样的ToggleButtons，其中加载了一个图像。按钮大小由图像大小决定，按钮本身由JavaCode创建。一些按钮的左侧或右侧都有图标(该图标只是加载图像的一部分)。
如何将文本向左或向右移动特定值，以便再次居中文本，但具有图标的偏移量？我不介意传递图标的宽度作为参数，但我找不到任何东西来移动一定数量的文本。
按钮是从绿色图像创建的，右边的图标是它的一部分；总宽度是300，图标是100；文本应该居中到剩余的200。由于语言设置的原因，文本本身不能是图片的一部分。
浏览 0提问于2013-04-22得票数 0
4回答
md-按钮内的字体图标对齐
、、、、
我试图在按钮内对齐字体令人敬畏的图标，使它们相对于工具栏上的文本居中。我有以下标记；
<div ng-app="app">
<md-toolbar>
<div class="md-toolbar-tools" md-tall"">
<h2>
<span>Icons</span>
</h2>
<md-button class="md-icon-button"&g
浏览 2提问于2015-11-27得票数 13
回答已采纳
我正试着在一个input标签里放一个非常棒的Font图标。
这是我的HTML代码：
<div class="input-group">
<input class="form-control" type="password" placeholder="Password">
<span class="input-group-addon"><i class="fa fa-key fa-fw"></i></sp
浏览 2提问于2016-10-10得票数 8
回答已采纳
我看到有一些关于这个主题的帖子，但没有一个具体回答我的问题
展示了如何将文本水平居中。
我想让它在父div中垂直居中，而不使用设置固定像素数量的top (虽然我需要它是动态的)
有什么线索吗？
.parent_div {
position: relative;
text-align: center;
}
.child_div {
position: absolute;
width: 100%;
top: 70px;
}
<div class="parent_div">
<img src=...></img>
浏览 1提问于2014-01-15得票数 3
我正在尝试添加图标在颤振可怕的通知(NotificationActionButton)，但图标没有出现与按钮时，通知来。
这就是我如何将图标存储在android/app/src/main/res/drawable中，并访问它，但是当通知到来时，它就不能工作了。
在标记完成之后，应该会出现它。
浏览 10提问于2022-10-12得票数 0
我的目标是垂直居中一个可点击(链接)字体的图标在一个div-栏。没用的。相反，图标粘在div的底部。
这就是我试过的：
#bar {
background-color: red;
}
#bar>a {
font-size: 100px;
color: white;
background-color: green;
display: inline-block;
}
#bar>a>svg {
background-color: blue;
vertical-align: middle;
}
<script src="https:/
浏览 0提问于2020-08-17得票数 1
回答已采纳
2回答
我需要帮助在Android Studio中的布局。
我有文本和图标(各5个)，每个文本都与一个图标相关联。
图标和文本垂直居中。
我需要把每个文本和图标在一个« + »的形状。所以一个在中心，上，下，左，右。
如何使用图标对文本进行分组，以便可以将其解释为一个元素，并更容易将其居中？
谢谢！
你会发现我必须匹配的结果：
浏览 0提问于2020-03-20得票数 1
3回答
我有一张像这样的桌子
<form >
<table>
<tr>
<td>Name :</td> <td><input type="text" name="name"></td><br>
</tr>
<tr>
<td>Password :</td> <
浏览 0提问于2015-11-28得票数 1
正如所附图片所示，我有一个注册表格。我将密码输入框及其附加的showPassword图标放在一个单独的视图元素中，这样它们就可以放在一行中，而主容器则是一列。 是否可以将密码输入框与其他元素一起推送？ 我能想到的最好的解决方案是，如果你可以根据元素的前面对齐项目，而不是它的中心点。但是，我不知道这在CSS中是否可行。 其他元素只是居中。 ? StyleSheet中的CSS代码 const styles = StyleSheet.create({
container:{
flex: 1,
flexDirection: 'column',
heig
浏览 35提问于2021-09-07得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
