I've been attempting to center text on a nav bar but haven't been successful. What could I be overlooking?
// include external modules
import React, { Component } from "react";
import {
Navbar
} from "reactstrap";
import {
Menu
} from "react-feather";
class ThemeNavbar extends Component {
handleClick = e => {
this.props.toggleSidebarMenu("open");
};
render() {
return (
<Navbar className="navbar navbar-expand-lg navbar-light bg-faded">
<div className="container-fluid px-0">
<div style={{display: 'flex', justifyContent:'center', alignItems:'center'}}>
<h1> Content Here </h1>
</div>
<div className="navbar-header">
<Menu
size={14}
className="navbar-toggle d-lg-none float-left"
onClick={this.handleClick.bind(this)}
data-toggle="collapse"
/>
</div>
</div>
</Navbar>
);
}
}
export default ThemeNavbar;<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>There are no external CSS files affecting the page, but it's still not working properly. How can I resolve this issue?