I have my buttons in a row and I assigned a class with text-align:center;.
-So the class works on my h1 but not on my buttons (the buttons don’t align on the center of the page).
–i think the centering has to do with the way I applied the class or I should use a different centering class. I also saw a thread here that said it could be something to do with the Bootstrap4 version I’m using.
—Also, I tried to apply some CSS to the buttons using JS but the background-color and the color aren’t changing.
----as far as the JS goes I don’t know. I’m reall iffy about any JS truthfully lol and this doesn’t help.
hey tx for any help
In your CSS, the
.buttonSpace selector should have a
. at the beginning. Then add
margin-left: auto; and
You also shouldn’t nest a
<button> in an
<a> element. And don’t use
<h3> just because it has a large default font-size. It can be as simple as
then increase the font size with CSS.
H3: thought I had to use em’ because text-align only works in heading elements. Wrong?
Anchors: I only use anchors to apply hrefs.if I do it the way u showed me will it still be a button?
ur code lks spr man, tx for the help!
Did I do that right?
text-align works on any block element (that includes the
<div>, and so on).
Well, that works @kevcomedia.
I have a follow up question.
- Why did I have to set a margin-left/right for the buttons but not my H1?
- I need the buttons so ppl can click a ‘thing’ and go to a ‘place’ on the page. Should I put the anchor inside the button?
The thing is, by default, block elements (including
<h1>) take up the width of their container. You can see it by adding
outline: 1px solid red; to the
h1 styles. However, to center the text within that
<h1> you’ll use
On the other hand, when you add
auto margins to the left and right, it adds as much margin to both sides of the element as it can, in effect centering it. You don’t use
text-align: center; because it’s the element itself that you want to center, not the text in it.
You can use plain
<a> elements for that. If you have
<a href="#about">About</a>, and you have a section with an
id="about" in your page, clicking that
<a> will take you to that section. The browser does this for you with just HTML.
There’s no need to nest an
<a> inside button or vise versa. It’s like putting a clickable element within a clickable element, which makes no sense.
Oh I get it now.
still gonna use btns though lol
- myb I shouold make id’s and target those instead of targeting the ‘button’ type.