Why are the Margins within react not working correctly?

Question

I'm trying to understand some functionality of margins within React and still newbie with react. Currently, I have a render method that has some JSX/HTML. I'm trying to use CSS to style it better but have some questions regarding the code.

In the CSS, I had Buttons with Margin: auto; to center the elements within the container NavBar but it is not working. But when I have text-align in the .NavBar it works. Why is that? I thought it would work within Buttons because it will center relative to its parent container -> NavBar.

2.In .NavBar, when I have height 20% for example, it does not change unless I hard code in pixels. Since NavBar is the child of the main App.js, wouldn't it work in relative to the App file?

App.js:

import React from 'react';
import {NavBar} from './NavBar/NavBar';

function App() {

  return (
    <div className="AppMain">
      <NavBar/>
    </div>
  );
}

export default App;

App.css:

.AppMain{
    height: 100%;
}

NavBar.js:

import React from 'react';
import './NavBar.css';

export class NavBar extends React.Component{

    render(){
        return(
            <div className="NavBar">
                <button className="Buttons">About</button>
                <button className="Buttons">Contact</button>
                <button className="Buttons">Info</button>
                <button className="Buttons">Home</button>
            </div>
        )
    }
}

NavBar.css:

.NavBar{
    background-color: black;
    height: 20%;
}

.NavBar .Buttons{
    margin-right: 20px;
    margin-left: 20px;
    text-align: center;
    margin:auto;
}

score 1 · Answer 1 · answered Aug 08 '19 at 02:56

1

You need to add a <div> that wraps all the buttons together and just put margin: auto; on that div, and you can remove the margin:auto; from the buttons.

Hope this helps

answered Aug 08 '19 at 02:56

Shmili Breuer

3,927
2
17
26

I have ```NavBar``` for that – STOPIMACODER Aug 08 '19 at 02:57
But I assume you want `NavBar` to take the entire width, correct? – Shmili Breuer Aug 08 '19 at 02:59
Yes for the width but even using it for height using ```%``` rather than pixels does not work. – STOPIMACODER Aug 08 '19 at 03:01
That's why you need another `div` to just wrap the buttons and keep them in the center. – Shmili Breuer Aug 08 '19 at 03:01
I'm not sure what you meant with your last comment. – Shmili Breuer Aug 08 '19 at 03:02
Oh i understand. I apologize I confused ClassName with div – STOPIMACODER Aug 08 '19 at 03:03
No problem. You may also need to add `position:relative;` for the margin auto to work. – Shmili Breuer Aug 08 '19 at 03:05
Regarding the App.js, if i wanted it to cover the whole space how would i approach that? i managed to get the NavBar to cover with % but the app when i have it in ```%``` it does not cover full page. Why is that? – STOPIMACODER Aug 08 '19 at 03:08
1

A percent height only works within an element with a defined height (the parents height could be defined in px or % as long as it's parent has a defined height) except of the outermost element usually the `html` element which could its height defined in % cause it's parent is the window which has a defined height. So to your point I usually make my `html, body,.App` etc. 100% height and then I play around with the inside elements as needed. – Shmili Breuer Aug 08 '19 at 03:20
1

Sorry for the long comment, hope all makes sense. – Shmili Breuer Aug 08 '19 at 03:23

score 1 · Answer 2 · answered Aug 08 '19 at 03:09

1

margin: auto; only works if the width is specified and if the element is block-level. Look at this answer to understand how centering with margin: auto; actually works.

The height doesn't work because you've set the height of the AppMain to 100% which will be calculated after everything is rendered onto the DOM. You're basically trying to calculate 20% of 100% of something that isn't calculated yet. Try explicitly setting the height of the AppMain and see what that does. Relevant answer link.

answered Aug 08 '19 at 03:09

sam-m

146
1
6

Oh so for the App.js, it does not have a certain height so getting 100% of something that is ```null``` for example, it would do nothing. I heard that using vh is not safe to use. Is there a better way to do it or is it just based on opinion? – STOPIMACODER Aug 08 '19 at 03:13
1

Why not just specify the height in `rem` or `px`? If you open the console and check how some websites define the nav height you'll get an idea. Stackoverflow sets it explicitly to 50px. css-tricks has it defined for each media query. – sam-m Aug 08 '19 at 03:20

score 0 · Answer 3 · answered Aug 08 '19 at 03:04

0

The default display of the Button is inline-block. if you want to use margin: auto, You just need to change the display value to block

answered Aug 08 '19 at 03:04

XuWang

179
7

Why are the Margins within react not working correctly?

3 Answers3