Bonjour,
voilà plus de 2 jours que je suis stoppé dans mon projet par un stupide centrage CSS. J'ai lu divers tuto sur la question mais j'ai du passer à coté de la réponse car je n'y arrive vraiment pas.
J'aimerais un centrage horizontale et verticale automatique de ma fenêtre "main" sans que celle ci ne prenne toute la largeur. Les dimensions de "main" ne doivent pas être fixe, possibilité d'ajouter des <div> et de s'ajuster.
Merci d'avance de votre aides.
voilà plus de 2 jours que je suis stoppé dans mon projet par un stupide centrage CSS. J'ai lu divers tuto sur la question mais j'ai du passer à coté de la réponse car je n'y arrive vraiment pas.
J'aimerais un centrage horizontale et verticale automatique de ma fenêtre "main" sans que celle ci ne prenne toute la largeur. Les dimensions de "main" ne doivent pas être fixe, possibilité d'ajouter des <div> et de s'ajuster.
Merci d'avance de votre aides.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Test</title>
<script>
</script>
</head>
<style type="text/css" media="screen">
body {
width: 800;
height: 600;
margin: 0 auto;
position: relative;
background-color: #CCCCCC;
text-align: center;
vertical-align: auto;
}
.main {
width: auto;
height: auto;
position: absolute;
float: center;
text-align: center;
border: 5px solid red;
border-radius:25px;
background-image: url(back.jpg);
background-repeat:repeat;
padding-top: 16px;
}
.analog_block {
background-color: rgba(100, 100, 100, 0.5);
border: 2px solid red;
border-radius:25px;
width: 250px;
height: auto;
display: inline-block;
text-align: center;
margin-right: 20px;
margin-left: 20px;
margin-top: 20px;
margin-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
padding-top: 15px;
padding-bottom: 15px
}
.title {
font-size: xx-large;
color: red;
background-color: rgba(50, 50, 50, 0.9);
}
.sub_title {
font-size: 1.17em;;
color: yellow;
background-color: rgba(50, 50, 50, 0.9);
margin-left: auto;
margin-top: auto;
margin-bottom: 5px;
vertical-align: middle;
}
</style>
<body onload="GetArduinoInputs()">
<div class="main">
<div class="title"><center><bold>Thermomètre</bold></center></div>
<div class="analog_block">
<div class="sub_title"><strong><u>Température Intérieur</u></strong></div>
<p><span style="background-color: #FFFF00">Input 1 : <span id="inputs01">...</span></span></p>
</div>
<div class="analog_block">
<div class="sub_title"><strong><u>Température Extérieur</u></strong></div>
<p><span style="background-color: #FFFF00">Input 2 : <span id="inputs02">...</span></span></p>
</div>
</div>
</body>
</html>
