Zip
November 27, 2017, 12:58pm
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.
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.
Zip
November 28, 2017, 5:06am
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
Zip
November 28, 2017, 5:21am
4
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
Zip
November 28, 2017, 10:48pm
6
ok.
I thought margins and padding went.
margin: top, right, btm, left;
but I get that.