CODEWITHSUNDEEP
htmlcss
Andrew Kilburn
Andrew Kilburn

Reputation: 2251

How to horizontally center a div with anchor links inside?

I've looked into this and follow a couple instructions and they don't seem to work.

Follow this link for the code:

https://jsfiddle.net/3h937r1q/7/

I've tried margin: 0 auto;(center-block class) and float: none; on the parent div but I can't seem to get it to work. Can anyone help me center div in the middle of the page and tell me why it isn't working?

Expected outcome: https://jsfiddle.net/3h937r1q/22/

Except I do not want to use margin-left to move it in to the middle

Upvotes: 0

Views: 516

Answers (4)

Carol McKay
Carol McKay

Reputation: 2424

https://jsfiddle.net/25Lno6n7/

.home-buttons {
  width:600px;
  display:flex;
  flex-direction:column;
  align-items:center;
   }

   .home-buttons .HomepageBtn {
     flex:0 0 300px;
   }

Upvotes: 0

M B Parvez
M B Parvez

Reputation: 816

I think you are looking for this. As you are using bootstrap grid in within a tag, you must use bootstrap offset class to center the element.

<div class="col-xs-12 col-md-12 home-buttons">
    <a href="#" class="col-xs-6 col-sm-4 col-md-2 col-md-offset-4 col-sm-offset-2 HomepageBtn Animate">
        <div class="tile-text">
        AP REVIEW
        </div>
    </a>
    <a href="#" class="col-xs-6 col-sm-4 col-md-2 HomepageBtn Animate">
        <div class="tile-text">
        VAT CHECKER
        </div>
    </a>
</div>

Upvotes: 0

Manwal
Manwal

Reputation: 23816

I have removed height and given padding: 40px 0px to anchor tag

Updated DEMO

.home-buttons .HomepageBtn {
  background-color: #4F7F64;
  /*height: 140px;*/
  padding: 40px 0px;
  color: white;
  font-size: small;
  font-family: "futura-pt-n7", 'futura-pt', Helvetica, Arial, sans-serif;
  font-weight: bold;
  border-style: solid;
  text-align: center;
}

Upvotes: 0

Yash Srivastava
Yash Srivastava

Reputation: 992

You can use col-offset:

        <div class="col-xs-12 col-md-12 home-buttons center-block" >
        <a href="#" class="col-xs-6 col-sm-4 col-md-2 HomepageBtn Animate col-sm-offset-2 col-md-offset-4" >
            <div class="tile-text">
                AP REVIEW
            </div>
        </a>
        <a href="#" class="col-xs-6 col-sm-4 col-md-2 HomepageBtn Animate">
            <div class="tile-text">
                VAT CHECKER
            </div>
        </a>
    </div>

Upvotes: 1

Related Questions