[solved] Portfolio: My button row wont center and my css through JS isn't workin :(

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 margin-right: auto;.

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

<div class="buttonSpacing">
  <a href="#about">About</a>
  <a href="#contact">Contact</a>

then increase the font size with CSS.

1 Like

Tx man!
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!

What about my JavaScript?
Did I do that right?

text-align works on any block element (that includes the <h*> elements, <p>, <div>, and so on).

Buttons serve a different purpose. They’re primarily used in forms, but they can also be used to make the page more interactive (in tandem with JavaScript).

About your JavaScript, all it does is applying styles to elements, which is the job of CSS.

1 Like

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 text-align: center;.

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.

1 Like

Oh I get it now.
still gonna use btns though lol
-I think I figured out my javaScript problem.

  • I don’t have any external javaScript added in the Pen setings. But then I added jQuery (didn’t work), and thenjQuery UI (didn’t work), and Bootstrap4 in the JS settings. I tried them standing alone and in different combinations. So I don’t know.
  • myb I shouold make id’s and target those instead of targeting the ‘button’ type.