Не удается центрировать входную группу Bootstrap в Webkit, но отлично работает в Firefox

У меня есть упрямая группа ввода, которая не будет центрировать, и я полностью застрял. Особенно запутанным является то, что он отлично работает в Firefox, но не в браузерах Webkit.Не удается центрировать входную группу Bootstrap в Webkit, но отлично работает в Firefox

.product { 
 
    margin-bottom: 4rem; 
 
    text-align: center; 
 
} 
 

 
.product 
 
    input[type="text"] { 
 
    text-align: center; 
 
    width: 90px; 
 
    } 
 

 
.product 
 
    .prod-name { 
 
    font-size: 1.8rem; 
 
    } 
 

 
.product 
 
    .qty-choice { 
 
    margin-top: 1rem; 
 
    } 
 

 
.product 
 
    .input-group { 
 
     margin-bottom: 1rem; 
 
    } 
 

 
.product .inline-block { 
 
    display: inline-block; 
 
    text-align: center; 
 
    vertical-align: top; 
 
    
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="//code.jquery.com/jquery.min.js"></script> 
 
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> 
 
    <meta charset="utf-8"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-sm-12"> 
 

 
     <div class="product"> 
 
      <img src="http://placekitten.com/240/240" width="240" 
 
       height="240"> 
 
      <div class="prod-name">{{name}}</div> 
 
      <div class="sku">{{sku}}</div> 
 
      <div class="size">{{width}}" W x {{height}}" H</div> 
 
      <div class="price">${{price}}</div> 
 
      <div class="qty-choice inline-block"> 
 
      <div class="input-group"> 
 
       <span class="input-group-addon">Variation 1</span> 
 
       <input class="form-control qty" 
 
        type="text" placeholder="Enter Qty"> 
 
      </div> 
 
      </div> 
 
      <div> 
 
      <button class="btn btn-primary add-to-cart">Add to 
 
       Cart</button> 
 
      </div> 
 
     </div> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

Я все еще получаю повесить Bootstrap, но центрирования вещи было чрезвычайно трудно. Я предполагаю, что мой класс .inline-block - это неправильный способ обойти это, иначе он будет работать в обоих браузерах. Что я делаю не так?

источник

2014-11-06 CaptSaltyJack

Немного поиска вокруг говорит мне * возможно * быть какой-то вопрос с 'дисплея: инлайн-block' в Webkit. – CaptSaltyJack

Установить элемент для отображения: блок и центр с помощью поля. Доступен как смесь и класс.

<div class="center-block">...</div>

// Классы

.center-block { 
    display: block; 
    margin-left: auto; 
    margin-right: auto;

}

источник

2014-11-06 05:28:24 barabaskid

К сожалению, это не сработало. http://jsbin.com/xexexa/2 – CaptSaltyJack

Он отлично работает. Группа ввода подобна таблице, вы не можете указать ширину ввода, а не другую, я поражен тем, что она работает в Webkit. http://jsbin.com/hoxubu/1/edit – Christina

Не удается центрировать входную группу Bootstrap в Webkit, но отлично работает в Firefox

ответ

Смежные вопросы