-4

As shown in the picture, the button is left-aligned by default. What CSS property can I use to center align a button on a responsive website? Note: I am not sure if I pasted the correct code. Please let me know if this is an issue for you. Thanks in advance.

The image shows the button left-aligned. I would like the button to be horizontally and vertically centered in the section of my responsive website.

<div class="container">
     <div class="row">              
         <div class="col-sm-6 wow slideInUp">
            <br>
            <a class="btn btn-theme-primary btn-lg" href="http://websiteurl.com/">Click Here</a>
            <br><br>
        </div>
     </div>
 </div>
kcNeko
  • 587
  • 1
  • 7
  • 23
Alt-Rock Ninja
  • 31
  • 1
  • 6

1 Answers1

0

enclose the button inside the <div> tag with a style of text-align: center and add style on <a></a> with margin: 0 auto.

it should be like this

<div class="container">
     <div class="row">              
         <div class="col-sm-12 wow slideInUp">
            <br>
            <div style="text-align: center">
                <a class="btn btn-theme-primary btn-lg" style="margin: 0 auto;" href="http://websiteurl.com/">Click Here</a>
                <br><br>
            </div>
        </div>
     </div>
 </div>
kcNeko
  • 587
  • 1
  • 7
  • 23
  • Thanks kcNeko. I tested out your code but I am doing something wrong. Can you please correct me? – Alt-Rock Ninja Dec 02 '16 at 02:54
  • https://jsfiddle.net/bd8nudts/1/ try looking at this fiddle. it should work. – kcNeko Dec 02 '16 at 02:59
  • see my updated answer. Or changing `col-sm-6` to `col-sm-12` to center it within the whole 100% width. – kcNeko Dec 02 '16 at 03:08
  • kcNeko, it did not work. The button moved slightly to the right. That's about it. It is still very far from being centered. I tried to do the following but there was no effect: .row { text-align: center; } – Alt-Rock Ninja Dec 02 '16 at 03:32
  • change class from `col-sm-6` to `col-sm-12` to make it the 100% width. – kcNeko Dec 02 '16 at 03:34
  • It didn't work when I copy and paste your code. I am not sure what's wrong. I followed your instruction. – Alt-Rock Ninja Dec 02 '16 at 14:05
  • actually it worked, however you have a class of `col-lg-6` to your code which only occupies 50% of the screen width. – kcNeko Dec 05 '16 at 00:56
  • I tried it with your update on multiple attempts and it didn't work. The HTML box I was using formats the button differently. I now used a different HTML box and it worked. Now, I have too much padding at the bottom. Thanks for your help kcNeko – Alt-Rock Ninja Dec 05 '16 at 04:41