Центрированная кнопка слегка смещается в Chrome

Мой HTML-код выглядит так (используя Bootstrap):

<div>
 <div>
 <span>
 <select multiple="multiple">
 </select>
 </span>
 </div>
 <div>
 <div>
 <div>
 <button>
 
 </button>
 
 <button>
 
 </button>
 </div>
 </div>
 </div>
 <div>
 <span>
 <select multiple="multiple">
 </select>
 </span>
 </div>
</div>

Это отлично работает в IE или Firefox. В Chrome кнопки со стрелками не совсем выровнены:

Кажется, что проблема связана с align="center". При удалении кнопки выравниваются во всех браузерах, но я хочу, чтобы они были центрированы. Как мне это сделать правильно?

3 ответа

Я немного удивлен, что все браузеры не показывают тот же результат, что и Chrome. Проблема заключается в пробеле в вашем коде. Удалите его вокруг кода кнопок, чтобы он выглядел так:

<button>
 
</button><button>
 
</button>

пример загрузки


Альтернативой было бы поместить каждую


Вы также можете пойти другим путем:

Создайте свой класс "row" с атрибутом "position: relative", затем в атрибуте set "col-md-1" "position: absolute, left: 50%, margin-left: -yourwidth в px", и вы будете центрируйте свой "col-md-1".

Но имейте в виду, что вам также нужно будет отредактировать другой "col-md-4",

licensed under cc by-sa 3.0 with attribution.