Question

我正在为构建项目组合的项目制作一个导航栏，但是我无法让该导航栏完成我想要的工作。我希望“谁需要报价单”始终正确显示在左侧。但是然后我希望我的链接“体育，商业，政治”显示在屏幕中央。我一直在使用flexbox，但是没有一个选项可以做到这一点。有人可以帮我吗？这是我的代码。谢谢！

//js file
import React, {Component} from 'react';
import {Navbar, Nav,NavDropdown, Form, FormControl, Button} from 'react-bootstrap';

import './Topbar.css'
import img from './logo.png'

class Topbar extends Component {
  render() {
    return (
      <div className = "OuterDiv">
        <div>
        <a class="active" href="/">Who Needs A Quote!?</a>
        </div>
        <div class = "topnavcenter">

        <a href="/SportsPage">Sports</a>
        <a href="/BusinessPage">Business</a>
        <a href="/PoliticsPage">Politics</a>
        </div>
      </div>

    )
  }
}

export default Topbar;

//css file

.OuterDiv {
  display: flex;
  flex-direction: row;
  background-color: #FFFF00;
  padding: 14px 16px;
  font-size: 17px;

}



.topnavcenter {
  float: center;

}

再次感谢！

Answer 1

我不确定我是否完全正确地理解了这个问题，但是我会尽力回答。您最有可能需要输入以下内容：
-ms-align-self：中心;
自我定位：居中；
用于topnavcenter块

Answer 2

有几种方法可以使链接居中。选择哪种选项取决于您如何设置导航栏的样式。

text-align:center

一种简单的纯文本链接集的快速方法是使用.topnavcenter将text-align:center的内容居中。

.OuterDiv {
  display: flex;
  flex-direction: row;
  background-color: #FFFF00;
  padding: 14px 16px;
  font-size: 17px;
}

.topnavcenter {
  text-align: center;
}

<div className="OuterDiv">
  <div>
    <a class="active" href="/">Who Needs A Quote!?</a>
  </div>
  <div class="topnavcenter">
    <a href="/SportsPage">Sports</a>
    <a href="/BusinessPage">Business</a>
    <a href="/PoliticsPage">Politics</a>
  </div>
</div>

justify-content:center

如果您的计划是制作一个带有样式为按钮的链接的全功能导航栏，那么我宁愿使用flexbox选项。您可以将.topnavcenter设为flex容器，并使用justify-content:center将其子级居中。

.OuterDiv {
  display: flex;
  flex-direction: row;
  background-color: #FFFF00;
  padding: 14px 16px;
  font-size: 17px;
}

.topnavcenter {
  display: flex;
  justify-content: center;
}

<div className="OuterDiv">
  <div>
    <a class="active" href="/">Who Needs A Quote!?</a>
  </div>
  <div class="topnavcenter">
    <a href="/SportsPage">Sports</a>
    <a href="/BusinessPage">Business</a>
    <a href="/PoliticsPage">Politics</a>
  </div>
</div>

导航栏未将链接居中，我也不知道如何使用flexbox

2 个答案: