Je veux avoir une colonne de centre d'objet identique dans le mityle de la page. L'ID d'objets est: Total-Score et l'ID de conteneur sont les suivants: Résultats. J'essaie d'utiliser Flex mais je ne peux pas comprendre comment le centrer de quelque manière que ce soit. J'ai essayé d'utiliser Align-Contenu: Centre et Justify-Content: Centre mais ils semblent ne rien faire. Pourquoi? J'ai attaché juste le CSS et le HTML. Donc, ne me laisse pas attacher le code entier.
p>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="QuizTransition.css">
<meta name="viewport" content="width=device-width" />
</head>
<body>
<div class="container">
<div>
<h1 id="question-numer">
Intrebarea numarul:
</h1>
</div>
<div class="quiz-container">
<div id="quiz"></div>
</div>
<button id="previous">Intrebarea precedenta</button>
<button id="next">Urmatoare intrebare</button>
</div>
<div id="results">
<div id="total-score">
</div>
<div id="total-score">
</div>
<div id="total-score">
</div>
</div>
<script src="QuizLogic.js"></script>
</div>
</body>
</html>4 Réponses :
Tout d'abord, vous ne devez pas utiliser le même ID dans plusieurs éléments. Il devrait être unique. Au lieu de faire le wrapper Essayez de changer votre code dans les éléments suivants: p> p> #results code> plus petit, vous pouvez la définir à pleine largeur et rendre les enfants .total-score code> plus petit. Alternativement, vous pouvez envelopper les enfants avec un autre conteneur et centrer.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="QuizTransition.css">
<meta name="viewport" content="width=device-width" />
</head>
<body>
<div class="container">
<div>
<h1 id="question-numer">
Intrebarea numarul:
</h1>
</div>
<div class="quiz-container">
<div id="quiz"></div>
</div>
<button id="previous">Intrebarea precedenta</button>
<button id="next">Urmatoare intrebare</button>
</div>
<div id="results">
<div class="total-score">
a
</div>
<div class="total-score">
b
</div>
<div class="total-score">
c
</div>
</div>
<script src="QuizLogic.js"></script>
</div>
</body>
</html>
Je pense que vous devez centrer #result code> identifiant. #results {
display: flex;
align-items: center;
justify-content: center;
width: 10%;
}
#results div {
width: 100px;
height: 100px;
}
Cela résoudra votre problème. Merci
Un élément doit être attribué Flex Conteneur est le terme utilisé pour faire référence à un élément qui est attribué J'ai réorganisé ... bien tout parce que comme un curseur, il sera très problématique si vous continuez avec le code d'origine. La solution à votre problème (comme je peux le mieux comme je pouvais le dire, car la question était vague), peut être trouvée en revue les règles CSS concernant p> la position code> avec la valeur de absolu code>, relatif code>, fixe code> , ou collant code> afin d'avoir z-index code> à fonctionner. p> li>
affichage: flex code>. Si vous avez besoin de ses éléments descendants (appelés éléments Flex) être centré horizontalement, attribuez le conteneur flex justify-contenu: Centre code>. Si vous avez besoin des éléments Flex pour être empilés verticalement, attribuez le conteneur Flex flex-direction: colonne code> ou flex-flow: colonne code> { Nowrap code> ou enveloppe code>} p> li>
.Total-score p> p> l >
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
</head>
<body>
<form class="container">
<h1>Quiz Question <output id='number'>1</output></h1>
<fieldset class="quiz">
<button class="prev" type='button'>◀</button>
<fieldset class='slide active' data-num='1'>
<p class='question'>This is a question?</p>
<ol class='choice'>
<li><input id='a' name='pick' type='radio' value='0'> <label for='a'>This is choice A</label></li>
<li><input id='b' name='pick' type='radio' value='0'> <label for='b'>This is choice B</label></li>
<li><input id='c' name='pick' type='radio' value='1'> <label for='c'>This is choice C and is correct (value = '1')</label></li>
<li><input id='d' name='pick' type='radio' value='0'> <label for='d'>This is choice D</label></li>
</ol>
</fieldset>
<button class="next" type='button'>▶</button>
</fieldset>
<fieldset class='total-score'>
<label><b>Correct:</b> <output id="correct">0</output></label>
<label><b>Total:</b> <output id="total">0</output></label>
<label><b>Score:</b> <output id="score">0</output></label>
</fieldset>
</form>
</body>
</html>
Veuillez mettre votre question la plus courte, ne pas mettre l'ensemble du code de fichier. Si vous posez quelques questions, veuillez mentionner votre problème seulement.