[solved] How do I get anchor-btns to center in their column?

1

I have…

<div class="col-md-4 ">
  <img class="project-image img-responsive" src="#">
   <a href="#" type="button" class="btn btn-lg btn-primary">
     <h3>Project 1</h3></a>
     </div>

…but that ‘Project1’ isn’t centering in the col.
How would I go about centering that? Maybe a Bootstrap solution?

also…

  • should I be using an h3 tag there?Maybe a p tag instead? Or should I simply remove it?
  • I know I forgot the alt="", just haven’t gotten to it.
2

in <div class="col-md-4"> add class text-center so it looks like this

<div class="col-md-4 text-center">

Then, in CSS add margin: 0 auto; to project-image class

.project-image {
  border-radius: 50px;
  padding: 25px;
  margin: 0 auto;
}

text-center will align your buttons to centre and margin: 0 auto; will move images to centre.

should I be using an h3 tag there?Maybe a p tag instead? Or should I simply remove it?

No, you should do the following

<a href="#" type="button" class="btn btn-lg btn-primary">Project Name</a>

If you want to change the font-size do it in CSS.

3

I’ll try that in a few hours.
Here’s a question:

  • margin: 0 auto
    • will ‘0’ set the left margin and 'auto’set the right margin?
      How exactly is that working?
      Tx mike
4

:star_struck::star_struck::star_struck::star_struck::star_struck:
Aw man I love when it works.
tx @michal9909

5

That ‘0’ in margin will set both top and bottom margin to 0, where ‘auto’ will push your image to right and left (100%) and if both are used it will centre it. I hope that makes sense.

1 Like
6

ok.
I thought margins and padding went.

margin: top, right, btm, left;

but I get that.