如何在CSS和HTML中对齐垂直文本框？
在CSS和HTML中对齐垂直文本框，可以使用以下方法：
- 使用Flexbox布局：将文本框包裹在一个容器中，并将容器的display属性设置为flex。然后使用align-items属性将文本框垂直居中对齐。
<div class="container">
<input type="text" class="textbox">
</div>.container {
display: flex;
align-items: center;
}
.textbox {
/* 其他样式属性 */
}- 使用表格布局：将文本框放在一个表格单元格中，并设置单元格的垂直对齐方式为middle。
<table>
<tr>
<td>
<input type="text" class="textbox">
</td>
</tr>
</table>td {
vertical-align: middle;
}
.textbox {
/* 其他样式属性 */
}- 使用CSS的transform属性：将文本框的位置设置为绝对定位，并使用transform属性将其向下移动一半的高度。
<div class="container">
<input type="text" class="textbox">
</div>.container {
position: relative;
height: 100px; /* 容器的高度 */
}
.textbox {
position: absolute;
top: 50%;
transform: translateY(-50%);
/* 其他样式属性 */
}这些方法可以在CSS和HTML中实现对齐垂直文本框的效果。对于腾讯云相关产品和产品介绍链接地址，可以参考腾讯云官方文档或者腾讯云的开发者社区。
相关·内容
我有以下HTML和CSS
在火狐，Chrome，Safari和IE9中，文本框有一个左侧填充，文本垂直在中间，但在IE7和8中，文本是在文本框的顶部对齐的，我如何让它像其他浏览器一样垂直在中间？
我不能改变HTML，只能改变CSS。
提前谢谢。
浏览 0提问于2011-10-16得票数 0
回答已采纳
是否有可能仅仅通过CSS获得一个文本框(带有“type=text”的“输入”)来充当文本区域？
很明显，我可以设置高度和宽度，但我不能让它像文本区域那样包装，也不能像文本区域一样垂直对齐内容。
我有一种情况，我不能改变页面的HTML，但我可以改变CSS。我的用户想要文本区域，他们只有文本框，我希望我可以实现它与CSS单独。
我试过“空格”和“垂直对齐”的每一个组合。
浏览 2提问于2011-03-03得票数 2
回答已采纳
Adobe动画CC
Javascript
当使用Javascript时，有人知道如何在Adobe动画中的动态文本框中垂直对文本进行居中吗？不要与HTML中与CSS垂直对中的文本混淆。
这不管用：
myTextBox.style.display="table-cell";
myTextBox.style.verticalAlign="middle";
浏览 2提问于2016-10-25得票数 0
1回答
平行四边形文本框
、、
如何创建平行四边形类型的文本框，其中文本将垂直对齐。
我正在使用下面的CSS向我的文本框添加倾斜：
#parallelogram {
margin: 0 0 0 20px;
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
-o-transform: skew(30deg);
}
文本框对齐也受到影响，我只想使文本框垂直对齐。(见下面的截图)
浏览 4提问于2014-02-18得票数 1
回答已采纳
1回答
请教我在富文本框中设置垂直对齐的方法
我了解了如何在富文本框中设置horizen对齐方式。
样本代码
richTextBox1.SelectionAlignment = HorizontalAlignment.Center
但这不是垂直排列
我真的很想每个人都回答
浏览 1提问于2012-07-02得票数 0
1回答
我正在努力添加下拉菜单到我的网站()从灰色按钮在页面顶部。我已经很好地使用HTML和CSS列表(下面的代码)，但我无法弄清楚如何在下拉列表中垂直对齐文本。
现在对齐是很好的
元素占2行，但对于1行元素，它们与顶部对齐。
我尝试了安装div和添加垂直对齐:中间到CSS，但没有明显的变化。
HTML：
浏览 3提问于2013-07-19得票数 1
嗨，我做了一个简单的css类，我增加了文本框的高度。问题是文本在IE7中的顶部附近开始(就好像我没有更改高度一样)。但在Firefox中，文本显示为垂直对齐。现在我的问题是，如何在internet explorer中框的垂直中间创建文本这是我的css。
.textfield{
height:40px;
width:300px;
border: 1px solid #CCC;
font-size:20px;
color:#999;
}
这是我的html
<input name="" type="text" value=
浏览 2提问于2012-02-11得票数 0
回答已采纳
1回答
我正在尝试垂直对齐div标记中的内联元素。这是我的HTML：
<div class="foo">
<div id="bar">
<a href="#">Link 1</a>
</div>
</div>
下面是我的CSS：
.foo{
width:200px;
height:60px;
background-color:red;
}
.foo #bar{
text-align:center;
v
浏览 1提问于2012-12-11得票数 0
回答已采纳
我正在尝试制作一个这样的表单，具有水平布局：
<form id="foo" name="foo" method="post" action="fooaction">
<p>Enter a foo:
<input type="text" id="fooText" name="fooText"value=""/>
<input type="image" name="y
浏览 2提问于2009-06-17得票数 4
回答已采纳
如何在PowerBuilder中垂直对齐静态文本框中的文本，如下图所示？它可以水平对齐到左、中、右。但不能在垂直方向做同样的事情。
谢谢
浏览 5提问于2013-12-13得票数 0
我有一个表单，我正在尝试使一行“对齐”，以便整行(由4个文本框和标签组成)适合精确的像素宽度(比方说800px)。通常，如果我只是在没有任何特殊css的情况下进行布局，它不会超过800px。我想把它“拉伸”到800px。我不关心我是否必须拉伸文本框或它们之间的空格。
这类似于MS word中的对齐布局，如果这有助于描述我正在寻找的内容。在html / css的表单布局中，这是可能的吗？
浏览 1提问于2013-04-14得票数 4
我正在使用fabric.js库。我想垂直对齐文本到文本框区域的中心。请看图片。
在图像中，默认的光标是对齐到顶部，但我希望它居中。是否有像textalign这样的valign形式的文本属性
尝试了originY，但没有成功。
浏览 14提问于2018-03-05得票数 1
我正在尝试垂直对齐一个标签和两个文本框。我试着使用一个水平面板，一个网格和一个灵活的表格，但它们似乎都不能完美地对齐文本。你有什么意见建议？
浏览 0提问于2016-04-21得票数 0
我知道Craigslist允许有限的HTML和CSS，但我不知道如何垂直对齐图像。
我尝试过vertical-align样式、valign属性、浮动和添加padding。
浏览 0提问于2013-06-10得票数 2
1回答
我使用下面的教程来改进我的一些布局，并了解更多关于CSS显示属性的信息：
这个信息看起来很简单，我试图将一个特定<section>中的布局组织成一个这样的包装器，在中间部分添加一个Google <iframe>：
我当前网页的剪短
从屏幕截图中可以看到，我在左右CSS单元格中使用的HTML表粘在底部，而iframe则粘在顶部，而对于我的生活，我不明白为什么。
我创建了一个新页面，首先通过复制www.sitepoint.com教程中的代码来测试它。默认情况下，它与示例完全相同：
精确代码匹配的片段
但是，当我将段落包装在HTML表中时，也会发生相同的行
浏览 1提问于2017-11-17得票数 0
回答已采纳
2回答
我是一个HTML/CSS新手和垂直对齐的元素在侧div是让我疯狂。基本上，我有一个包含文本和图像混合的div，我所要做的就是垂直对齐ediv中间的元素。
根据
内联元素(并且只有内联元素)可以通过垂直对齐:中间在上下文中垂直对齐。但是，“上下文”不是整个父容器的高度，而是它们所在的文本行的高度。
因此，我创建了一个SPAN并设置了diplay: inline，但是没有什么工作：
<div id="main_section" class="main_align" >
<span class="inline">
浏览 3提问于2013-05-10得票数 4
回答已采纳
我能够垂直对齐在span(这是在div内)，但我需要我的页面独立于屏幕分辨率。已使用线高度功能，以遏制我的文本从div当我改变resolution..but时，我看到它没有垂直对齐为中间的所有分辨率。我应该研究css中的哪些特性？
<div>
<span style="width:49%; height:50%; top:25%; left:0%; line-height:50%;font-size:x-small;font-family:Verdana;font-weight:bold; position:absolute; display:block;"
浏览 2提问于2014-08-23得票数 0
回答已采纳
我希望在一个包含上标的项目列表中对齐文本，使主文本垂直排列：
HTML：
<ul>
<li>Shape: Rectangle</li>
<li>Length: 5m</li>
<li>Breadth: 3m</li>
<li>Area: 15m<sup>2</sup></li>
<li>Color: Blue</li>
</ul>
我尝试过在CSS中修改display、height、line-height和vertic
浏览 4提问于2012-06-06得票数 0
回答已采纳
我的Android webview中有一个iframe，我是这样加载的：
String folderPath = "file:android_asset/";
String fileName = "index.html";
String file = folderPath + fileName;
webView.loadUrl(file);
iframe是通过位于我的android/assests文件夹中的HTML和CSS文件加载的。HTML和CSS如下所示。HTML：
<!DOCTYPE html>
<
浏览 6提问于2021-12-01得票数 0
1回答
如何使用html和css在文本框中添加垂直线
<input type=text value=First|LastName >
需要这个垂直条看起来像两个不同的文本框中的两个值
浏览 4提问于2016-01-29得票数 2
回答已采纳
3回答
我有两个硬币。一个文本框，另一个按钮。我无法垂直对齐这两个div。我需要文本框和按钮是相同的高度和垂直对齐同一行。怎么啦？
.inputHolder{
border:1px solid #FFF;
vertical-align:middle;
}
.input{
margin-top:150px;
width:100px;
height:50px;
border:1px solid black;
font-size:1.2em;
padding:5px;
display:inline-block;
}
.input:focus{
outline:0;
}
.goBtn
浏览 7提问于2017-04-07得票数 0
回答已采纳
4回答
我想在一行中对齐文本框和按钮。我正在使用引导css。下面是我正在使用的代码。
HTML：
<div class="new-meows">
<input type="text" class="form-control" >
<button type="button" class="btn">Submit</button>
</div>
CSS：
.new-meows{
padding: 10px;
bord
浏览 3提问于2017-09-04得票数 4
回答已采纳
我认为这是一个典型的问题。我有下面的html
<div class="editor-label">Group Name: </div>
<div class="editor-field"><input type="text"></input></div>
和css
.editor-label {
float: left;
width: 200px;
margin-bottom: 4px;
margin-right: 10px;
text-align: right;
浏览 5提问于2012-08-11得票数 0
回答已采纳
有没有方法控制python中的文本方向？
我想要做的是使文本形状为垂直，如下图所示。
我在文档中寻找线索，但一无所获。
一个简单的解决方案似乎是制作一个水平文本框并将其旋转90度：
my_shape.rotation = 90
这使得整个形状垂直，但我想要做的是更改形状内文本的方向(即，创建一个垂直文本框)。
对于半宽字符，其行为看起来与垂直文本框完全相同.然而，对于像日本字符这样的全宽度字符，上面的解决方案改变了每个字符的方向，这是我所不期望的(显示在图像的右侧)。
我想要的是在图像的左边显示。请注意，日语句子的方向是垂直的，但它中的字符的方向仍然保持不变。
这可以很容易
浏览 6提问于2021-07-06得票数 2
回答已采纳
为什么垂直对齐在我试图对齐的元素上不起作用？但如果我对齐了它周围的其他元素就行了？
我读过很少关于垂直对齐的文章，这些文章指出它是为对齐表或内联元素而创建的。因此，我在代码中将所有元素设置为内联块。
当我尝试垂直对齐菜单链接时，它几乎什么也不做.如果我试图使1框与菜单链接的左边或右边对齐，它将按下菜单。
但是如果我同时垂直对齐两个框，文本就会对齐。
这是怎么回事，我应该如何使用垂直对齐，或者我应该不再使用它了？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="
浏览 1提问于2019-03-22得票数 0
回答已采纳
2回答
即使文本框控件和label控件是对齐的，它们中的文本也不会出现在相同的垂直位置。
对于如何在VBA用户表单中对齐标签和文本框中的文本，有什么好的做法吗？
浏览 4提问于2015-05-26得票数 2
回答已采纳
4回答
我已经进行了广泛的搜索，并看到了许多关于如何使用vertical-align属性和line-height属性的line-height文本的示例。然而，我的所有努力似乎都没有结果，因为我无法使我的文本垂直对齐。如何使文本垂直对齐以使其居中？height属性不是固定的，所以我不能使用line-height。
<nav>
<ul>
<li><a href="html/login.html">Login</a></li>
<li><a href="
浏览 5提问于2014-06-22得票数 9
回答已采纳
4回答
在我的网页部分，我使用一个图标库。我在div中插入图像/图标，并通过css对齐中心(垂直和水平)进行管理。但我发现我的影像中心垂直对齐，而不是精确的中心在我的div中。请看我的代码和css。
css
#main {
width: 170px;
height: 300px;
border: 1px solid #c3c3c3;
display: -webkit-flex;
display: flex;
align-items: flex-start;
}
#main div{
width: 70px;
height: 70px;
align-self: center;
background:r
浏览 7提问于2016-06-02得票数 0
1回答
上下文： Electron桌面应用程序使用Timeline.js，它通过iFrame嵌入Video.js。iFrame源在下面。
我已经挣扎了几个小时了:我需要将Video.js实例垂直地集中在它所在的iFrame中。我不能硬编码值，因为应用程序(不仅仅是视频go )可以全屏运行。
使用下面的“蛮力”CSS，它“工作”，但显然黑条是不可接受的。我删除了在vjs vjs-16-9 CSS中添加一个ref，它工作得很好:根据内容设置大小，在全屏模式下调整大小--所有这些都很好，只是我还没有弄清楚如何将vjs实例垂直地放在iFrame中。
可能是一些简单的东西，但我对这一切都是新手。
.video-
浏览 8提问于2017-01-31得票数 1
回答已采纳
嘿，伙计们，我只是在玩一些CSS，我刚开始接触CSS，我做了以下简单的演示：
HTML :：
<label for="test">Name</label>
<input type="text" id="test">
CSS :：
input {
height: 70px;
border-radius: 5px;
display: inline-block;
浏览 3提问于2015-05-26得票数 0
回答已采纳
3回答
我在试着折断桌子拐杖..。
我想在3个文本框上放置3个“标签”，“第一个”，“中间”和“最后”，这样标签就在相应的文本框上方，标签和文本框垂直对齐。换句话说，我需要一个3列的表格，其中第一行有3个标签，第二行有3个文本框，所有的东西都是左对齐的，我希望所有的列宽度都是相同的和固定的。
我如何在只使用CSS的w/o表中做到这一点？
我知道空白符-left将为我提供组之间一致的距离，但是我如何使用段落或中断标记“回车符”到下一行w.o，因为所涉及的距离实际上是字体的函数，我想，而不是能够向下“回车符”指定数量的像素。
我知道display: block会把东西放在新的一行上，但那会在前后产生一个中
浏览 2提问于2010-02-11得票数 0
回答已采纳
4回答
我正在创建一个网站，我有一个登录字段，其中包含两个输入。我想垂直对齐这些项目在设计文件。
这是我的HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Instagram tweaks</title>
<link rel="stylesheet" href="style.css">
</head>
<body&
浏览 3提问于2017-08-08得票数 4
回答已采纳
我有一个包含占位符文本的输入文本框；现在，我正在缩小占位符文本，以便当文本框聚焦时它仍然是可见的，但是当我缩小它时，尽管垂直翻译，占位符文本离输入框的顶部太近了。
我知道文本框中的光标仍然是居中的，但是我希望----占位符文本和光标--都在文本框中居中。有什么方法可以用CSS来完成吗？
//我的输入文本框：
<input
type="text"
className={errors.email && errors.email.length !== 0 ? 'bad-input' : ''}
value={this.
浏览 7提问于2020-02-28得票数 0
3回答
嗨，我刚接触html和css。我写了一个html，但它是水平显示的。我需要它垂直对齐。在计算机上查看时，应将其分成4个部分，并分别垂直对齐。 我的HTML <div id="allPages">
<div class="block">
<a href="">Happy</a>
<a href="">Happy</a>
<a href="">Happy</a>
<a href=&
浏览 24提问于2021-01-04得票数 0
我正在做一个项目，更新他们的WinForms应用程序UI，使其与大小更加一致。默认情况下，TextBox和ComboBox控件的高度不同，即使字体相同也是如此。我已经能够通过关闭AutoSize来调整文本框的大小，但是文本仍然位于控件的顶部，在下面留下了一个间隙。
有没有办法在控件中垂直居中显示文本？
浏览 3提问于2010-04-16得票数 9
回答已采纳
2回答
我正在使用一些CSS类来操作我的验证摘要。目前，我只显示第一个错误。我希望在其div内对齐此错误。然而，我的垂直对齐属性似乎没有任何效果。我可以看到，当我在Firefox中使用firebug检查元素时，它们是被应用的，但是它们没有垂直对齐(它们位于顶部)。类的其他元素呈现正确。
我的div
<div style ="float: left; max-width: 200px; height: 75px; vertical-align:middle">
@Html.ValidationSummary(false)
</div>
我的CSS类
.va
浏览 8提问于2014-07-31得票数 0
回答已采纳
我正在尝试在div内垂直对齐div (为视频制作播放按钮)，我尝试了所有传统的垂直对齐方法，甚至尝试了jquery脚本垂直对齐，但到目前为止，我仍然没有效果。
编辑-内容/圆圈播放按钮需要完全响应，所以我不能删除20%的宽度和20%的填充-底部它。
可以在这里找到该网站的实时版本-- ，所讨论的div是“视频播放”div。
HTML
<div class="rectanglewrap">
<div class="rectangleimg" id="gknengine">
<div class=
浏览 7提问于2015-05-03得票数 0
回答已采纳
3回答
html：
<td>
<img>
text here
</td>
css：
td img{
display: block;
float: left;
}
我希望图片在单元格内浮动到左边，文本垂直对齐到中间。如果没有图片，文本会自动垂直对齐到中间，但有了图片，我似乎无法更改文本的垂直对齐方式。
有什么想法吗？
浏览 4提问于2010-12-07得票数 1
回答已采纳
2回答
我正在创建一个使用HTML和CSS的网站。我有一个HTML表格，我在其中定义了高度和宽度。我正在定义的高度(450px)，使高度是相同的在整个网站的每一页。但是，当我定义一个高度时，该表中的所有内容都希望垂直居中。我找到了很多关于垂直对齐的信息(如何)，但是尝试使用这些方法来撤消垂直对齐是行不通的。由于删除高度是解决我的问题的唯一方法，我正在寻找一种解决方案，它允许我指定我的高度，而不是垂直对齐表格中的所有内容。如果有必要，我会发布代码，但我认为这个问题可能不需要它。谢谢。
浏览 1提问于2012-12-29得票数 0
3回答
我有以下html5和css，其中我有一个用户名和密码类型的输入。我希望li元素垂直显示，而不是水平显示，并使两个标签垂直对齐，同时两个输入文本框也垂直对齐。
代码：
.loginform li {
background-color: purple;
display:block;
float:left;
width:300px;
heigh:150px;
padding: 5px;
}
<section class="loginform cf">
<form name="login" action=
浏览 1提问于2015-09-15得票数 0
我试图理解css中的垂直对齐属性。当我设置垂直对齐=底部时，只有跨度才会向下移动。div也是如此。但是，当我为p设置垂直对齐=底部时，div和span都会移动。此行为将在下面所附的图像中捕获。
我的HTML：
<html>
<head>
<title>
</title>
</head>
<body>
<span>span1</span>
<div>div1</div>
<p>paragraph A</p>
</body&g
浏览 1提问于2016-08-19得票数 0
回答已采纳
我无法获得在ExtJS中创建的文本框，使其垂直对齐到底部。
问题是，无论我尝试什么-它保持垂直对中在文本框内(文本字段本身是拉伸的)。这有点难以解释，所以我创建了一个JSFiddle来演示我的问题：
CSS代码：
.exx-valign-bottom { vertical-align: bottom; }
ExtJS代码：
items: [
{
xtype: 'textfield',
flex: 1,
itemId: 'teQuantityField',
fieldCls: 'x-
浏览 0提问于2013-05-22得票数 0
回答已采纳
2回答
因此，我尝试在父div中垂直对齐和水平对齐文本框跨度，问题是它可以很好地对齐或对齐，而不是两者都对齐。如果它是单行文本，它可以工作，但如果它是一个很长的段落，需要多行的父div，它不会垂直对齐。 .objprevicnt {
position: absolute;
margin: 0;
top: 50%;
left: 50%;
width:inherit;
height:50px;
transform: translate(-50%, -50%);
} 此外，我还动态地更改文本 document.getElementById("myid").innerHTML = '
浏览 36提问于2021-03-01得票数 -1
回答已采纳
3回答
我只想垂直对齐页眉中的元素。这在表格中很容易，但在CSS中却不知道该怎么做。我想垂直对齐所有3个元素与黑条：“标志”，“检索”和文本输入。
下面是CSS：
body {
margin:0;
padding:0;
font-size:100%;
}
#header {
background-color:#303030;
height:3em;
}
#logo {
color:#EEEEEE;
font-size:2em;
line-height:1.5em;
padding:0 30px 0px 10px;
display:inline;
}
#recherche {
color:#EEE
浏览 1提问于2013-07-02得票数 0
正如标题所说，我应该如何垂直对齐这个：-
需要：
目前，在基线处，垂直对齐是默认的。
目前：_
HTML：
<div class="moduleResult">
<p>You have
<span class="moduleCard">88</span>
out of
<span class="moduleCard">88</span>
correct</p>
</div>
CSS：
.m
浏览 2提问于2014-01-14得票数 3
回答已采纳
在过去的几天里，我一直在为我正在建设的网站上的一些奇怪的间隔而挣扎。最初，我认为这是Chrome的一个显示问题，但我在IE8、IE9、火狐和Safari中复制了这个问题。为了实现向后兼容性，我使用了旧式的HTML/CSS，所以我可以说，这不是IE处理HTML5或其他一些尖端更新。
虽然在线上的一些解决方案让我尝试了不同的东西，包括漂浮在父亲身上，但没有什么是成功的&我总是在其中一个方面填充。
为了重现这个问题，我已经把它简化到了最基本的部分，并包括了一个屏幕截图，我可以看到在我的一端看到的填充。我肯定会感激另一双或七只眼睛向我展示我错过了什么。
编辑:在这个问题上，行高被证明是罪魁祸首
浏览 6提问于2012-12-18得票数 0
回答已采纳
4回答
我正在尝试将一系列文本框与其相应的标签对齐。因为它们位于两个不同的div中，所以我无法使用inherit关键字。我尝试使用下面的javascript/jquery代码对齐元素对齐，但是$(tb).css('left')只返回auto。有人知道如何使用html、css和/或javascript/jquery实现这种对齐，而不使用表吗？
$(function() {
$('#infoLabels label').each(function(idx,lbl) {
var tb = $('#' + lbl.htmlFor);
浏览 2提问于2015-08-04得票数 0
回答已采纳
5回答
我已经用谷歌搜索过很多次了，我不明白为什么我的div不会居中。
HTML：
<body><div id="mydiv"></div></body>
css
*{
margin:0;
padding:0;
}
html,body{height:100%; width:100%;}
#mydiv{
height:50%;
width:50%;
background:grey;
margin:au
浏览 0提问于2013-03-14得票数 1
回答已采纳
2回答
我有一个非常简单的引导带3水平形式，其中一行有3列
列1是引用column2的标签。
列2是一个输入文本框。
第3列是一个描述性文本。
列1与column2文本框垂直对齐，但column3似乎高于其他textbox。
我做错什么了？
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel
浏览 1提问于2019-01-17得票数 0
回答已采纳
3回答
使用CSS处理表对齐问题
、、、
我是非常新的使用HTML和CSS，并需要一些帮助对齐3个不同的表，因此垂直列对齐，因为你向下通过页面。
由于每个表中的内容不同，目前它们没有。我试过在其他职位上寻求建议，但运气不佳。我的表的宽度是相同的，但是我需要它们的大小不同，前两个是相同的，最后一个是最长的，里面的内容最多。
我有什么正确的方法能做到这一点？
垂直对齐列.
浏览 8提问于2014-10-27得票数 1
回答已采纳
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
腾讯云开发者
