html文本中心居中,在html数字输入中居中文本(Center text in html number input)

最新推荐文章于 2024-06-10 21:54:22 发布
最新推荐文章于 2024-06-10 21:54:22 发布
阅读量1.1k 收藏
点赞数 1
文章标签： html文本中心居中

在html数字输入中居中文本(Center text in html number input)

我有一个在html中的数字输入。 我想中心文本(即输入)在里面。 我当然做到了：

text-align: center;

哪种作品。 但问题是。 当显示这些箭头时，文本现在居中。 但是当箭头消失时，文本停留在现在不再是中心的相同位置。

0591f5a4f09d5bdb0a66d89e2b0bfc60.png

I have a number input in html. I want to center the text (i.e. the input) that is inside. I of course did:

text-align: center;

which sort of works. The problem is though. The text is now centered when those arrows are shown. But when the arrows disappear, the text stays at the same position which now of course isn't the center anymore.

0591f5a4f09d5bdb0a66d89e2b0bfc60.png

原文：https://stackoverflow.com/questions/23715881

2019-11-29 10:49

满意答案

您可以让微调按钮(箭头)始终显示：

input[type='number']::-webkit-inner-spin-button,

input[type='number']::-webkit-outer-spin-button {

opacity: 1;

}

或者你可以让他们始终隐藏：

input[type='number']::-webkit-inner-spin-button,

input[type='number']::-webkit-outer-spin-button {

-webkit-appearance: none;

margin: 0;

}

无论哪种选择，内容将始终居中。

You can have the spinner buttons (arrows) always show:

input[type='number']::-webkit-inner-spin-button,

input[type='number']::-webkit-outer-spin-button {

opacity: 1;

}

Or you can have them always hidden:

input[type='number']::-webkit-inner-spin-button,

input[type='number']::-webkit-outer-spin-button {

-webkit-appearance: none;

margin: 0;

}

With either option, the contents will always be centred.

相关问答

要将输入值的更改反映到HTML，您必须设置输入的value属性。 像这样的东西： $('#test').change(function () {

$(this).attr('value', this.value);

});

另请注意，jQuery .html()返回html的innerHTML ，因此您必须修改您的字符串以开始和结束html标记(或使用vanilla JS outerHTML )。 jsFiddle的现场演示 。 To reflect the changes to inp...

如果您只想更改占位符风格 ::-webkit-input-placeholder {

text-align: center;

}

:-moz-placeholder { /* Firefox 18- */

text-align: center;

}

::-moz-placeholder { /* Firefox 19+ */

text-align: center;

}

:-ms-input-placeholder {

text-align: center...

JavaScript (最可靠的)

虽然这很简单，它不会让您使用组合键和其他不可键入的键。 对于更完整的JavaScript解决方案，也支持输入类型号和最大长度验证，请考虑使用此Polyfill 。 HTML 5 (不需要JavaScript，并且在许多现代浏览器中也不会以标准方式运行。)

您可以让微调按钮(箭头)始终显示： input[type='number']::-webkit-inner-spin-button,

input[type='number']::-webkit-outer-spin-button {

opacity: 1;

}

或者你可以让他们始终隐藏： input[type='number']::-webkit-inner-spin-button,

input[type='number']::-webkit-outer-spin-button {...

你可以通过这种方式实现这一点。

var input = document.getElementById("Parti_NEstudante");

input.addEventListener("input", function() {

if (this.value.length > this.max.leng...

我看到了你的代码并在我的本地服务器上进行了测试。 您的输入标记中的name属性似乎是大写字母N(firstName)。 $ _POST＆$ _GET区分大小写。 并且，尝试在您编码的每个php上使用此功能，以便您可以监视您正在接收的内容。 function pr($var) {

echo '

';

print_r($var);

echo '

';

}

例如： pr($_POST);

pr($_GET);

pr($_REQUEST);

祝你好运！ I...

innerHTML设置元素内的文本(包括html元素)。 通常，我们将它用于div，span等元素以在其中插入其他html元素。 对于你的情况，你想设置一个输入元素的值。 所以你应该使用value属性。 将innerHTML更改为value document.getElementById('add').value = sum;

innerHTML sets the text (including html elements) inside an element. Normally we use ...

根据HTML5定义，没有指定数字格式的选项。 现在最新的浏览器不会将输入的数字视为相同(请参阅https://caniuse.com/#feat=input-number中的 “已知问题”)。 我担心在输入中强制给定模式的唯一选择涉及JavaScript。 来源： https ： //developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number，https : //www.w3.org/TR/html5/sec-forms.html#...

你试过什么了？ 你几乎回答了自己的问题，让输入具有透明的背景。 input {

border: 0;

outline: 0;

background: transparent;

border-bottom: 2px solid black;

width: 20px;

}

的jsfiddle What have you tried so far? You pretty much answered your own question, make the inpu...

我也尝试将顶部和底部填充设置为13px，将高度设置为14px(结合字体大小)将导致元素高40px。 这按预期工作; 除了任何带尾巴的字符(如g，q，j等)在底部被截断。 如何将顶部填充设置为13px(而不是底部填充)并将高度设置为剩余空间，如下所示： 它在Firefox和Chrome中都能正常运行; 我目前还没有访...

相关文章

Java Number类 一般地，当需要使用数字的时候，我们通常使用内置数据类型，如：byte、

...

写like语句的时候 一般都会写成 like '% %' 在mybatis里面写就是应该是

...

各位大虾晚上好，我有个问题想请教你们，我想美化html的file外观，但貌似现在还不能用css直接设计

...

Structure in the flow » Blog Archive »

...

一、中文分词：分词就是利用计算机识别出文本中词汇的过程。 1.典型应用：汉字处理：拼音输入法、手写识别

...

lucene对索引的更新比solr麻烦，solr只需要调用一个函数UpdateRequest.setA

...

内容摘要:HTML5 智能form表单新属性，主要包括智能表单介绍和智能表单使用与规范。但在不同支持H

...

判断第二个日期比第一个日期大,用table显示n条记录，每3行换一次颜色，即1，2，3用红色字体，4，

...

HTML5有两个很炫的元素，就是Audio和Video,可以用他们在页面上创建音频播放器和视频播放器，

...

最新问答

List lc = driver.findElements(By.cssSelector("table[id*='filter']")); for (WebElement row : lc) { List images = row.findElements(By.tagName("img")); for (WebElement image : images) { image.click(); } } List

我没有任何问题，但我能够通过启用我的弹出窗口拦截器(我使用更好的弹出窗口阻止程序 - Chrome网上应用店 )来重现你在运行Chrome 21.0.1180.89的Windows 7上遇到的问题。 如果您使用弹出窗口阻止程序，请尝试为jsfiddle /您正在使用的站点禁用它。 I didn't have any issues with it, but I was able to reproduce the problem you were having on Windows 7 runnin

opencv已经有开源的人脸识别的代码了，只需要安装一下，有训练好的关于人脸的xml文件，然后根据这两个xml文件，输入一张带有人脸的图片进行检测就好了。参考网址：http://www.cnblogs.com/mengdd/archive/2012/08/01/2619043.html 这里说的更详细一些。matlab是专门针对图像处理的，不过一般的用matlab实现的，用opencv也都可以做的到。有些时候将matlab代码转为opencv还是需要一定时间和一定功底的

您需要使用ProximitySensor来检测手机屏幕何时被覆盖。 这是一个例子： 在android中使用接近传感器 You need to use ProximitySensor to detect when the phone screen is covered. Here is an example: Using proximity sensor in android

我认为找到这个的最简单方法是搜索ProjectName列。 它似乎包含层次结构信息： select c.* from content c where ProjectName+' ' like '%Project 1 %' 额外的空间是确保Project 1与Project 10不匹配。 I found the way to solve. But the actual solution is given by Jayvee. Sorry I didnt know the method it ca

弄清楚了！ 它被链接到： searchText: 'Search for a member...', 这将自动填充搜索栏的内容，并尝试根据该搜索词找到用户。 删除此属性解决了这个问题。 Figured it out! It was linked to: searchText: 'Search for a member...', This will autofill the search bar with content and will attempt to find the user

错误2245也可能是密码历史记录问题。 新密码是最近使用的密码吗？ 编辑：看起来这个功能在Server 2003 SP 2之后破了。我在使用文档中的示例从C ++调用函数时遇到了同样的错误。 您可能需要使用NetUserSetInfo。 Error 2245 could also be a password history problem. Is the new password one that was used in the recent past? Edit: It looks like

我在网上搜索了很多，为我的问题找到答案。 我花了很多时间，所以我在这里贴出来帮助别人。 为了使GLEW与MinGW一起工作，您应该从GLEW网站下载源代码并放置 来自MinGW \ bin的gcc.exe 来自MinGW32 \ mingw32 \ bin的ar.exe 到GLEWs源文件夹并在该文件夹中创建并运行.bat，如下所示： gcc -DGLEW_NO_GLU -O2 -Wall -W -Iinclude -DGLEW_BUILD -o src/glew.o -c src/glew.

使用模板成员函数时，您需要使用template关键字，如下所示： my_postoffice.template get_postbox() 和 po.template get_postbox() cf here： http ： //ideone.com/W0owY1代码和这里： 我在哪里以及为什么要放置“template”和“typename”关键字？ 有关何时使用模板关键字的确切说明 You need to use the template keyword when using

你不能，至少在Devel :: REPL调用Data :: Dump :: Streamer的情况下。 DDS将始终编码不在\ x20- \ x7e范围内的任何字符。 您可以修改DDS以选择其他方式。 After reading the source of DDS, I came up with this patch based on the Perl Monks code: $ cat quote.rc { no warnings 'redefine'; sub Data::D

AMAX杨威
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html入门到放弃笔记
05-15
1、编写一对 body 标记，在body标记中，嵌套一对 div标记，在 div 标记中 ，嵌套一对 a 标记，在 a标记中，嵌套一对 b 标记，b标记中，随意编写一些文本 <body> 这是一段测试文本 </body> ...
【小程序】input输入框属性及上下左右居中的示例（图文+代码）
【敦厚的曹操】的专栏
07-15 6853
input输入框属性说明及示例（图文+代码）
antd a-input-number 的基本使用
草莓Sir的博客
03-16 2万+
antd a-input-number 的基本使用 问题说明 在项目中，经常会遇到，一个输入框只能输入数据类型数据，只能输入数据类型的正整数， 或者只能输入保留两位小数的正整数，该文只为解决此问题 解决方法 使用antd的a-input-number组件 该组件本身已经实现只能输入数值类型，此时不需要去写正则，只需使用precision参数 这里详细解释precision参数 p...
怎么让input框在用户输入后，文字居中显示
最新发布
ggq53219的博客
06-10 461
最好的方法可能是创建一个自定义的输入组件，这个组件可以是一个div或其他块级元素，并使用 CSS 来设置内部文本的对齐方式。然后，你可以使用 JavaScript 来监听这个自定义组件的输入事件，并相应地更新关联的隐藏input元素的值。这样，你就可以在保持input元素可用性的同时，实现文本的居中显示。"></div>});// 你可能还需要添加一些额外的逻辑来处理复制、粘贴等事件。
关于input属性的居中问题
lu10505的博客
11-30 2万+
在学习了一些简单的前端基本知识之后开始手动尝试用源码结合php写一个简单的登陆界面，打算稍微美化一下 在使用input标签的时候碰到问题发现不知道怎么居中，尝试margin无效 于是想了一个本办法：         在input标签的外面又套了一个div，尝试给这个div命名并且给上宽度再使用margin水平居中，但是最后的结果是input标签的居中属性并没有对等         也就是说
设置input 内容居中显示
热门推荐
舒婷(Zoe)
08-06 13万+
text-align:center  水平居中显示 input.text{text-align:center;padding:10px 20px;width:300px;}
innerHTML、innerText、textContent和Jquery中text()、html()、val()
yangyang的专栏
02-26 2152
1.
html手册.docx
11-03
34. **表单**：`<form>`用于创建用户输入的表单，`<input>`定义不同类型的输入控件，如文本输入、复选框等。 35. **框架和框架集**：`<frame>`定义框架集的窗口，`<frameset>`定义框架集。 36. **标题**：`<h1>`至...
利用HTML实现一个个人信息表的网页.docx
11-23
6. 期望工资：可以使用`<input type="number">`，让用户输入数字。 7. 自我介绍和长处：使用`<textarea>`创建多行文本输入区域。 8. 家庭住址：同样使用`<input type="text">`。 最后，可以使用`<form>`标签将这些...
java web前端.docx
02-20
4. 排版标签：标题 h1-h6、段落 p、字体加粗 b、字体斜体 i、字体下划线 u、居中 center、换行 br、水平线 hr 5. 图片标签：<img> 属性：图片来源 src、图片宽度 width、图片高度 height、alt 图片找不到显示的内容 ...
简单学习Android TextView
08-29
6. `android:inputType`：这个属性主要用于EditText，但它也可以在TextView中设置，来定义用户在输入时可能期望的键盘类型。例如，`textPassword`用于显示密码输入键盘，`number`用于数字输入。 在提供的示例代码中...
如何让一个input输入框居中
qq_32864189的博客
09-24 8495
<div style="text-align:center;vertical-align:middle;"><input type="text"></div>
html关于input平行/垂直居中显示
m0_58522778的博客
03-12 1万+
html关于input平行且垂直居中显示的方法
html 按钮居中、input内容居中
weixin_44195615的博客
05-24 4203
margin-left:auto;margin-right:auto;
html innerhtml br,如何将javascript innerhtml居中
weixin_39900582的博客
06-18 355
好的,首先嗨,我对今天刚开始的这件事完全不熟悉,我正在编写一个脚本,需要添加一些内部HTML,我想知道我是否需要将每一行居中,或者将开始居中,而不是结束居中?我做得对吗?如果你觉得我可以做得更好,请让我知道不能做jquery。例Avar settingsHtml = '';settingsHtml += "settings";settingsHtml += "TEXT HERE";setting...
使input文本框中文字居中
dames的博客
05-02 1万+
通过text-align:center实现： <input style="width: 60px;text-align:center"> 效果：
input标签文字居中
panm85的博客
12-19 3143
记录一个常遇到的小问题： 在页面的input标签中，经常需要将文字垂直居中，网上大多数做法是用vertical-align:middle来控制。但是CSS中这个属性经常不好用。原因很多人分析过，大多数都说文字垂直居中没啥可行的好方法。有时候会建议用padding属性，但我使用的效果并不理想。 今天遇到个可行的方式，就是给input标签设置line-height属性。 例如在CSS中： in...
单行文字垂直居中和多行文字正常的功能实现
一呀一转转圈
07-22 191
点击切换单行文字和多行文字显示，要求单行垂直居中和多行文字正常
html中元素居中的五种方法
weixin_62889848的博客
02-18 1万+
html中元素居中的五种方法
HTML5入门教程：掌握新元素与标签详解
- `<input>`元素的新类型：如`email`、`number`等，增强表单验证能力。 - 表单元素和属性：详细介绍了表单控件的使用和属性设置。 - HTML5事件属性：例如`onsubmit`、`onclick`，用于响应用户交互。 5. **参考...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值