Centrer un composant .vue

**Jmeuh** · 05/12/2019, 00h58

Bonjour à tous,

Cela fait des heures que je bloque sur un problème sans trouver de solution.

Dans un projet html classique j'aurai fait qqch comme ça:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>component</div>
</body>
</html>
 
<style>
 
html, body {
    height: 100%;
}
 
body {
    display: flex;
    justify-content: center;
    align-items: center;
}
 
</style>

Le problème est que je suis dans un projet nuxt et que je ne trouve pas ou placer l'attribut " height: 100%; "
Pour mon teste j'ai appliqué une classe "display" dans layouts/default.vue sur html, body, mais aussi sur les balises <nuxt/>, <div> et même <template> c'est dire mon désarroi , mais également sur la <div> de mon _composent.vue. Je les ai appliqués un par un puis tous en même temps, rien y fait.

Une seul chose ma donné un résultat: ( dans /layouts/default.vue )

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
* {
    height: 100%;
}

Ce qui affect tout les éléments bien sur, me confirmant au passage que ça fait des heures que je tourne autour de la solution.

Une idée?

**NoSmoking** · 05/12/2019, 09h16

Bonjour,
qu'est ce qui t'empêche de le mettre dans la partie <style></style> de ta page index ?

**Jmeuh** · 05/12/2019, 16h52

Et bien rien ne m'en empêche mais ça ne fonctionne pas. (rédiger dans default.vue m'évite la répétition en cas de réutilisation dans d'autres page)

Cependant après un reboot de mon cerveau j'ai trouvé une solution.
dans default.vue :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
  <div> 
    <Header/>
    <nuxt/>
  </div>
</template>
...
<style>
  .container {
    margin: 0 auto;
    min-height: 85vh; 
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>

dans ma_page.vue :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<template>
    <div>
        <Component class="container" />
    </div>
</template>
...

A bientôt pour de prochaines mésaventures.

Centrer un composant .vue

VueJS

Discussions similaires

Partager

Partager