html - 垂直居中图像旁边的导航菜单(CSS)

Question

好吧，我正在学习如何使用 CSS 进行设计，但我在 CSS 编码方面遇到了麻烦。我想在右下角插入图像( Logo )和导航菜单。

这是我做的:

HTML:

    <header>
        <img src="imagenes/origen.png">
        <nav>
            <ul>
                <li><a href="#">Inicio</a></li>
                <li>/</li>
                <li><a href="#">Tienda</a></li>
                <li>/</li>
                <li><a href="#">Contacto</a></li>
            </ul>
        </nav>
        <div class = "limpiar"></div>
    </header>

CSS:

    html {
    background-color: #ffffff;
}

body {
    background-color: yellow;
    margin: 1% 16%;
}

.limpiar {
    clear: both;
}

body img {
    width: 100%
}

body header {
    background-color: red;
    width: 100%;
}

body header img {
    width: 20%;
    float: left;
}

body header nav {
    width: 80%;
    float: left;
}

a{
    text-decoration: none;
    color: black;
    font-family: Arial;
}

li{
    margin-right: 3%;
    list-style: none;
    float: left;
}

但是我无法获取垂直和水平对齐部分!感谢您的回复。

Answer 1

试试这个。我删除了一个 float float 的“li”元素。并在“nav”元素上添加了“text-align: right”。建议减少漂浮物的使用。希望对您有所帮助

html {
    background-color: #ffffff;
}

body {
    background-color: yellow;
    margin: 1% 16%;
}

.limpiar {
    clear: both;
}

body img {
    width: 100%
}
body header  {
    background-color: red;
    padding-top: 20px;
}

body header > div {
    background-color:#fff;
    width: 100%;
    display: flex;
    align-items: flex-end; 
}

body header img {
    width: 20%;
    flex-grow: 1;
}

body header nav {
  width: 80%;
  text-align: right;
}

a{
    text-decoration: none;
    color: black;
    font-family: Arial;
}
ul {
  margin: 0;
  padding: 0;
}
li{
    margin-right: 3%;
    list-style: none;
    display: inline-block;
}

<header>
        <div>
          <img src="imagenes/origen.png">
          <nav>
              <ul>
                  <li><a href="#">Inicio</a></li>
                  <li>/</li>
                  <li><a href="#">Tienda</a></li>
                  <li>/</li>
                  <li><a href="#">Contacto</a></li>
              </ul>
          </nav>
        </div>
        <div class = "limpiar"></div>
    </header>