Одиночный знак внутри квадратного div на мобильном устройстве смещен по вертикали - PullRequest
Новая
       27

Одиночный знак внутри квадратного div на мобильном устройстве смещен по вертикали

0 голосов
/ 25 января 2019

У меня есть этот простой счетчик, как вы можете видеть, + и - идеально выровнены, но когда на мобильном телефоне они примерно на 8px ниже центра.Я тестировал с Android Chrome и браузером Samsung. 

.input-group {
	display:inline-flex;
}
.input-group-button {
	border:1px solid #d3d3d3;
	width:23px;
	height:23px;
	text-align:center;
	display:table-cell;
	vertical-align:middle;
}
.input-number-increment, .input-number-decrement {
	color:#5A585A;
	font-family:"Courier New", Courier, monospace;
	font-size:21px;
	display: flex;
   justify-content: center;
   align-items: center;
}
.input-number {
	text-align:end;
	padding-left:4px;
	border:1px solid #d3d3d3;
	border-left:0;
	border-right:0;
	
	height:21px;
	width:30px;
	outline:none;
}
 input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  
	visibility:hidden;
	opacity: 0;

}
<div class="input-group input-number-group">
            <div class="input-group-button">
                <div class="input-number-decrement nohl">-</div>
            </div>
            <input class="input-number" id="878634" type="number" value="1" min="0" max="1000">
            <div class="input-group-button">
                <div class="input-number-increment nohl">+</div>
            </div>
        </div>
...