Кнопка HTML на мобильном устройстве не центрирована как вид на рабочем столе

#html #css #bootstrap-4 #responsive-design

#HTML #css #bootstrap-4 #адаптивный дизайн

Вопрос:

Я создал веб, который содержал 2 кнопки. На рабочем столе все в порядке и находится по центру.
Но на мобильном устройстве они смещаются влево. Что я должен сделать с CSS, чтобы они располагались по центру на рабочем столе и на мобильном устройстве?

Я попытался изменить style = "margin-left: 5%; до 10%. Но это заставляет две кнопки смещаться вправо на рабочем столе.

введите описание изображения здесь

Вот мой код:

 <div class="col-md-4 col-xs-12" style = "margin-left: 5%;">
<button type="button" id="lost_item_button" class="btn btn-primary " onclick = "lost()" >A</button>


<button type="button"  style = "background-color: #fefefe;color: #0a0a0a;display:none" id = "found_button_selected" class="btn btn-primary mb-2" onclick = "found()">B</button>
  

Ответ №1:

Удалите поля и используйте класс text-center, чтобы сделать rest.

 <div class="col-md-4 col-xs-12 text-center">
   Content/Buttons
</div>
  

Ответ №2:

Используйте загрузочный div «text-center» как

 <div class=" col-md-4 col-xs-12 text-center"> <button type="button" id="lost_item_button" class="btn btn-primary " onclick = "lost()" >A</button>
  

B

или удалите поля — только для полей.