使用CSS在左角保留徽标并使用中心ul元素

Question

header {
  display: flex;
  paddingBottom: 8px;
  paddingLeft: 5px;
}

.logo {
  margin-top: 5px;
  height: 40px;;
  padding-left: 10px;
}

ul {
  display: flex;
  list-style-type: none;
  font-size: 15px;
  justify-content: center;
  font-weight: 100;
}

li {
  padding-right: 10px;
}

<header>
  <img src={nicklogo} className="logo" alt="logo" />
  <ul>
    <li>Me</li>
    <li>Projects</li>
    <li>Skills</li>
  </ul>
  </header>

我有一个标题元素，它有一个img标签，ul标签有3个li元素。 我的左角有img标签。我想将3 li元素放在header元素的中心。

当人们在不同尺寸的屏幕上阅读时，我也想让它缩放。

Answer 1

此示例完全居中。

＆＃13;

＆＃13;

string z = "Word";
int a = 1;
int b = 2;

＆＃13;

* {
  margin: 0;
  padding: 0;
}

header {
  display: flex;
  padding-Bottom: 8px;
  padding-Left: 0px;
  width: 100%;
}

.logo {
  margin-top: 5px;
  height: 40px;;
  padding-left: 10px;
}

.center {
  width: 100%;
  margin-left: -50px;
}

ul {
  display: flex;
  list-style-type: none;
  font-size: 15px;
  justify-content: center;
  font-weight: 100;
  position: relative;
  line-height: 50px;
}

li {
  padding-right: 10px;
}

＆＃13;

＆＃13;

＆＃13;

强调文字

Answer 2

试试这个

＆＃13;

＆＃13;

header {
  display: flex;
  paddingBottom: 8px;
  paddingLeft: 5px;
}
.logo {
  margin-top: 5px;
  height: 40px;
  
  padding-left: 10px;
}
ul {
  margin: auto;
display:block;

  list-style-type: none;
  font-size: 15px;
  justify-content: center;
  font-weight: 100;
}
li {
  display: inline;
  padding-right: 10px;
}

＆＃13;

<header>
  <img src={nicklogo} className="logo" alt="logo" />
  <ul>
    <li>Me</li>
    <li>Projects</li>
    <li>Skills</li>
  </ul>
</header>

＆＃13;

＆＃13;

＆＃13;