Как выровнять кнопку слева и логотип в центре на одном ряду с помощью начальной загрузки?

Question

Итак, у меня есть этот код

<div class="row">
    <a class="btn btn-default mainbutton pull-left">Back to Main Menu</a>
    <img class="center-block" src="logo.png" />
</div>

Похоже, что изображение логотипа смещено от центра, потому что после кнопки выполняется только измерение поля.Как я могу убедиться, что кнопка выровнена по центру?

Answer 1

Вы можете поместить кнопку и изображение в два разных столбца, так же, как

<div class="row">
  <div class="col-md-4">
    //your button code
  </div>
  <div class="col-md-4">
    //your image code
  </div>
  <div class="col-md-4">
    //some other stuff
  </div>
</div>

Answer 2

Я бы разбил его на 3 равных столбца, чтобы было проще.Тогда вы можете использовать текст-центр:

<div class="row">
    <div class="col-sm-4">
        <a class="btn btn-primary">Back to Main Menu</a>  
    </div>  
    <div class="col-sm-4 text-center">
        <img src="logo.png" />
    </div>
    <div class="col-sm-4"></div>
</div>

Answer 3

Вы можете попробовать сделать разрыв между ними, например:

<div class="row">
    <a class="btn btn-default mainbutton pull-left">Back to Main Menu</a>
    <br/>
    <img class="center-block" src="logo.png" />
</div>

Убедившись, что ваше изображение расположено под кнопкой, вы сможете следовать инструкциям в Как выровнять изображение по вертикали внутриdiv? если вам нужна помощь в выравнивании содержимого внутри div.