How to center my Div container with Ul/Li

Question

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.

score 0 · Accepted Answer · answered Mar 02 '23 at 16:33

0

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

.links-container {
  min-height: 100vh;
  align-items: center;
}

answered Mar 02 '23 at 16:33

qiqqq

631
5
10

Thank you a lot It work ! But i've a trouble with SVG file, do you know why my SVG take all the space of the body ? Thank you – Mar 02 '23 at 17:04
What you meant with take all the space? I see you have CSS rule which limits your logo image to 400px of width and 400px of height. – qiqqq Mar 03 '23 at 09:11

score 0 · Answer 2 · answered Mar 02 '23 at 16:49

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>

How to center my Div container with Ul/Li

2 Answers2