反应 - 链接的左角徽标列表偏离中心与内联

Question

我正在尝试将 link 的列表置于页面中间。使用这个设置，它稍微偏右，为什么会这样？我认为我的左角徽标将它们推离了中心，因为徽标、link 列表和配置文件 link 都在同一水平面上。但是，无论徽标有多大，我都希望 link 居中。我该如何解决？

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

function CornerPiece(props) {
  return (
    <div>
      { props.value}
    </div>
  )
}

class Header extends React.Component {
  render() {
    return (
      <div id="menu-outer">
        <div class="alignleft">
          <CornerPiece
            value={<h2>ThisIsMyLogo</h2>} /></div>
        <div class="alignright">
          <CornerPiece
            value={<h3>Profile</h3>} /></div>
        <div id="navcontainer">
          <ul>
            <li><a href="#">Milk</a></li>
            <li><a href="#">Eggs</a></li>
            <li><a href="#">Cheese</a></li>
          </ul>
        </div>
      </div>
    )
  }
}

h1, h2,  h3,  a {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

}

#navcontainer ul {
    margin: 0;
    padding-top: 2%;
    list-style-type: none;
    text-align:center;
  }

#navcontainer ul li { display: inline; }

#navcontainer ul li a {
    text-decoration: none;
    padding: .2em 1em;
  }

.alignleft {
    padding-left: 2%;
    float: left;
  }

.alignright {
    padding-right: 2%;
    float: right;
  }

Answer 1

UPD

我更新了codesandbox。请检查。

我更改了 menu-outer
中元素的顺序
我删除了 menu-outer 的所有子元素中的 float 并给了它们 flex: 1
我加了

#menu-outer { 显示：弹性；证明内容：居中；对齐项目：居中； }
.alignright还有text-align: right

为什么我删除了 float 并添加了 flex？这种方法更好地处理水平线上的块元素。

此外，我建议您忘记使用 % 进行填充，就 UI 而言，最好使用编号填充（10px、20px 或更好16px 和 32px)

上一个回复

我试过你的例子，效果很好here。这意味着问题不在这部分代码中，而是在父组件中的某个地方。

反应 - 链接的左角徽标列表偏离中心与内联

react - left corner logo list of links off center with inline

html

css

inline

reactjs