如何在导航栏中将 h1 居中答案

【问题标题】：how to center h1 in navbar如何在导航栏中将 h1 居中
【发布时间】：2019-05-18 01:27:30
【问题描述】：

我试图在导航栏上将文本居中但不成功。我错过了什么

// import 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> I am centered </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>

没有影响页面的外部 CSS 文件，但它无法正常工作。我该如何解决这个问题？

【问题讨论】：

你试过textAlign: 'center'吗？
你的 sn-p 不工作
到目前为止您尝试过什么？您能否向我们展示您的代码的最小工作示例（您当前的 sn-p 无法运行），以便我们提供帮助
为元素添加宽度，使其可以居中内部元素
这不是一个 React 问题，而是一个 HTML/CSS 问题。也许你可以只显示生成的 HTML/CSS

标签： javascript html css reactjs

【解决方案1】：

我相信您想在这里使用的规则是：textAlign: 'center'。假设你的h1 没有覆盖它的规则，它应该从包含的div 继承它。否则尝试将此规则添加到h1 本身。我希望这会有所帮助。

【讨论】：

【解决方案2】：

<h1 style={{ textAlign: "center"}}> I am centered </h1>

【讨论】：