skip to Main Content

First things first sorry for my english..

There is the code first :

*,
::before,
::after {
  padding: 0;
  margin: 0;
  border: border-box;
}

body {
  background-color: white;
}

.logo img {
  width: 400px;
  height: 400px;
  position: absolute;
}

.drapeau img {
  /* Langue FR */
  width: 30px;
  position: absolute;
  right: 10px;
  top: 5px;
}

.links-container {
  /* Div de la liste */
  display: flex;
  justify-content: center;
}

.links-nav {
  /* UL */
  list-style-type: none;
  font-family: "Arapey", sans-serif;
  font-style: italic;
}

.links-nav li {
  /* élément de la liste */
  color: #333;
  font-weight: bold;
  font-size: 1.3rem;
  text-align: center;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="style.css" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Arapey&display=swap" rel="stylesheet" />
</head>

<body>
  <div class="logo">
    <img src="brand.svg" alt="Le Bonaparte" class="src" />
  </div>
  <div class="drapeau">
    <img src="drapeau.png" alt="Langue-France" class="src" />
  </div>
  <div class="links-container">
    <ul class="links-nav">
      <li class="la-carte">La carte</li>
      <li>Nouveautés</li>
      <li>Petit déjeuner</li>
      <li>Plats</li>
      <li>Boissons</li>
      <li>Dessert</li>
      <li>Fromages</li>
    </ul>
  </div>
</body>

</html>

https://pastebin.com/c44xq3CF

I need to make this on a 376x560px page !

The problem is that the links-container is stuck on the top center of the page, but I want to center it vertically and horizontally. But it always stuck at the top and it covers my SVG logo.

How do I fix that please ? thank you !

I’ve tried changing the display of the logo or the div container to flex or using position or translate, but cannot place them as I want.

2

Answers


  1. You can add two below CSS rules to center links-container vertically:

    .links-container {
      min-height: 100vh;
      align-items: center;
    }
    
    Login or Signup to reply.
  2. You are quite unclear with what output you desire. However, based on my understandings, I think that your aim is to center the links-container vertically and horizontally on the page.
    You told that you tried changing the display to flex, and also worked around with position to get it centered. But I don’t think that might work until the container itself is taking the full width and full height.

    Also, the images cover the links, which can be prevented by setting z-index to -1.
    Hence, here is the code with the container taking full width and full height

     
    
    *,
    ::before,
    ::after {
      padding: 0;
      margin: 0;
      border: border-box;
    }
    
    html, body{
        height: 100%;
        width: 100%;
        overflow: hidden;
    }
     
    body {
      background-color: white;
    }
     
    .logo img {
      width: 400px;
      height: 400px;
      position: absolute;
      z-index: -1;
    }
     
    .drapeau img { /* Langue FR */
      width: 30px;
      position: absolute;
      right: 10px;
      top:5px;
      z-index: -1;
    }
     
    .links-container {
      /* Div de la liste */
      display: flex;
      justify-content: center;
      align-items: center
      height: 100%;
      width: 100%;
    }
     
    .links-nav {
      /* UL */
     
      list-style-type: none;
      font-family: "Arapey", sans-serif;
      font-style: italic;
    }
     
    .links-nav li {
      /* élément de la liste */
      color: #333;
      font-weight: bold;
      font-size: 1.3rem;
      text-align: center;
    }
    <html>
      <body>
        <div class="logo">
          <img src="https://picsum.photos/400" alt="Le Bonaparte" class="src" />
        </div>
        <div class="drapeau">
          <img src="https://picsum.photos/30" alt="Langue-France" class="src" />
        </div>
        <div class="links-container">
          <ul class="links-nav">
            <li class="la-carte">La carte</li>
            <li>Nouveautés</li>
            <li>Petit déjeuner</li>
            <li>Plats</li>
            <li>Boissons</li>
            <li>Dessert</li>
            <li>Fromages</li>
          </ul>
        </div>
      </body>
    </html>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search