javascript – 当输入字段内的垂直对齐中心时,字符和数字的行为不同

2019年7月28日 212次阅读

嗨我在我的项目中使用一些输入字段来重置密码功能.我希望我的输入值在输入字段中垂直对齐.

>当我在输入内正确对齐数值时,字符值未正确对齐.像这样 .

《javascript – 当输入字段内的垂直对齐中心时,字符和数字的行为不同》

在这种情况下我输入的CSS

width: 50px;
height: 48px;
border: 1px solid #58595b;
border-radius: 100%;
font-size: 40px;
padding-bottom: 2px;
text-align: center;

>当我在输入中正确对齐字符值时,数值未正确对齐.像这样 .

《javascript – 当输入字段内的垂直对齐中心时,字符和数字的行为不同》

在这种情况下我输入的CSS

width: 50px;
height: 43px;
border: 1px solid #58595b;
border-radius: 100%;
font-size: 40px;
padding-bottom: 7px;
text-align: center;

我想在这些情况下改变高度和填充底部.

我的问题

如何在数字和字符值的同时垂直对齐居中.我在这种情况下被困了一段时间.请帮忙 .提前致谢 .

**我已经在Safari和Chrome中进行了测试.

这是jsFiddle链接 – > https://jsfiddle.net/qzrf4dnb/2/

最佳答案 你可以为小写字母添加另一个类,其中包含不同数量的行高,如下所示：

jsFiddle 1

.circle-div {
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  font-size: 30px;
  color: white;
  background-color: skyblue;
  float: left;
  margin: 5px;
}
.lower-case {
  line-height: 45px;
}
<div class="circle-div lower-case">c</div>
<div class="circle-div">9</div>
<div class="circle-div">A</div>

更新1：

考虑到输入字段的情况,上面的方法不起作用,因为它不受行高的值的影响,但是按照对这种特殊情况使用另一个类的相同方式,我们可以微调这些值填充和高度,如下所示：

jsFiddle 2

.circle-input {
  width: 50px;
  height: 50px;
  padding: 0;
  border: 2px #888 solid;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  font-size: 30px;
  float: left;
  margin: 5px;
}
.lower-case {
  height: 45px;
  padding-bottom: 5px;
}
<input type="text" class="circle-input lower-case" maxlength="1" value="c">
<input type="text" class="circle-input" maxlength="1" value="9">
<input type="text" class="circle-input" maxlength="1" value="A">

更新2：

大多数情况下,你想要使这个动态,你需要在第一次加载或输入或更改事件时使用javascript检查每个输入值,这可以这样实现：

jsFiddle 3

var circleInputs = $('.circle-input');

circleInputs.each(function() {
  checkLowerCase($(this), $(this).val());
});

circleInputs.on('change input', function() {
  checkLowerCase($(this), $(this).val());
});

function checkLowerCase(item, value) {
  if ((/[a-z]/).test(value)) {
    item.addClass('lower-case');
  } else {
    item.removeClass('lower-case');
  }
}
.circle-input {
  width: 50px;
  height: 50px;
  padding: 0;
  border: 2px #888 solid;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  font-size: 30px;
  float: left;
  margin: 5px;
}
.lower-case {
  height: 45px;
  padding-bottom: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" class="circle-input" maxlength="1" value="c">
<input type="text" class="circle-input" maxlength="1" value="9">
<input type="text" class="circle-input" maxlength="1" value="A">
点赞