0

So I have this code

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

It appears that the logo image is off-centered because it only takes the margin measurement after the button. How can I ensure that the button is aligned to the center?

Obsidian Age
  • 41,205
  • 10
  • 48
  • 71
Samuel Smith
  • 139
  • 1
  • 1
  • 13
  • Possible duplicate of [How to vertically align an image inside a div?](https://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-a-div) – Obsidian Age Mar 04 '19 at 01:35

3 Answers3

2

You can put the button and the image in two different columns Just like

<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>
Farazzz
  • 145
  • 1
  • 1
  • 10
0

You could try a break in between like: 

<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>

After ensuring your image is positioned below your button, you should be able to follow the instructions in How to vertically align an image inside a div? if you need help aligning content inside a div.

Toms Code
  • 1,439
  • 3
  • 15
  • 34
0

I would break it up into 3 equal columns to make it easier. Then you can use text-center:

<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>
Terry S
  • 58
  • 5