HTML 代码在 Firefox 中无法正常工作

Question

我正在尝试显示以下代码。它在 Chrome 和 Safari 中工作正常，但在 Firefox 中工作不正常。代码链接:http://jsfiddle.net/nvarun123/fv4jxo4t/26/

HTML 代码:

<div> 
    <a>
        <button (click)="decrement()" class="btn btn-primary" style="float: left;">
            <span><i class="glyphicon glyphicon-minus" ></i></span>
        </button>
    </a>
    <input type="text" style="width:45%;" [(ngModel)]="count">
   <a>
       <button (click)="increment()" class="btn btn-primary" style="float: right;">
           <span><i class="glyphicon glyphicon-plus" ></i></span>
       </button>
    </a>
</div>

CSS 代码:

div {
    position:relative;
    border: 1px solid #CACEDB;
    width: 162px;
    height:38px;
    overflow: hidden;
    white-space: nowrap;
    border-radius:3px;
}

input {
    text-align: center;
    height:100%;
    width:100%;
    border:none;
}

input:focus {
    outline: none;
}

button {
    height:100%; 
    border:none;    
}

button:hover {
    background-color: green;
}

button:active {
    background-color: #015191;
}

Answer 1

这是一个在 html 元素中垂直居中内容的技巧。

垂直对齐对于 CSS 来说总是很棘手，但是这个代码片段可以让你轻松地对单行文本进行对齐。基本上，我们使用 line-height 属性在文本的顶部和底部放置等距的空间。要实现此功能，行高值需要与包含文本的 html 元素的高度相同。

检查这个

p {
  border: red dotted thin;
  height: 100px;
  text-align: center;
  background: black;
  color: white;
  /* magic line */
  line-height: 100px;
}

<p>
  One Liner
</p>