Question

我正在尝试在导航栏上居中放置文本，但未成功。我想念什么

// 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文件会影响页面，但无法正常工作。我该如何解决这个问题？

Answer 1

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

Answer 2

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

如何在导航栏中将h1居中

2 个答案: