Bonjour, je réalise un petit jeu réalisé uniquement en caractère texte (ASCII)
chaque ascii est dessiné sur un fichier .txt et est appelé dans une balise <pre>.
Je les positionne ensuite les uns par rapport aux autre en partant du centre:
top: 50%; left: 50%; transform: translate(-50%, -50%);
Malgré plusieurs tentatives, il y a des décalages selon la qualité des écran. Auriez-vous une idée de comment je peux faire pour empêcher ça?
Je vous remercie par avance:
chaque ascii est dessiné sur un fichier .txt et est appelé dans une balise <pre>.
Je les positionne ensuite les uns par rapport aux autre en partant du centre:
top: 50%; left: 50%; transform: translate(-50%, -50%);
Malgré plusieurs tentatives, il y a des décalages selon la qualité des écran. Auriez-vous une idée de comment je peux faire pour empêcher ça?
Je vous remercie par avance:
<style>
body {
font-size: 13px;
font-family: Consolas, monospace;
margin: 0;
line-height:1.15;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
overflow: hidden;
}
pre{
position: absolute;
line-height:1.15;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
white-space: pre;
}
div{
position: absolute;
}
</style>
</head>
<body>
<div id="letout">
<div id="paysage">
<pre ><script>document.include('txt/paysage.txt');</script>
</pre>
</div>
<!-- radia -->
<div id="radia" style="top: 60px; left: -160px; cursor: pointer;" onclick="fonction_radia()">
<pre ><script>document.include('txt/radia.txt');</script>
</pre>
</div>
[...]