/* Feuille de style (économiseur d'écran) CSS version 1.0 créée le 30.05.2016
*/
/* Page entière (utilisé pour avoir une couverture globale en couleur) */
body {
background-color:#005580; /*night mode*/
background-color:black; /*screensaver mode*/
}
/* Affichage de date (en haut) */
#date{
font-family:Arial;
font-size: 130%;
font-weight: 800;
text-align: left;
position: fixed;
top: 5px;
left: 20px;
color:black; /* night mode*/
color:blue; /* day mode*/
color:white; /* screensaver mode*/
}
#clearfix{display:block}
/* Affichage d'heure (en haut) */
#time{
font-family:Arial;
font-size: 130%;
font-weight: 800;
text-align: left;
position: fixed;
top: 5px;
left: 300px;
color:black; /* night mode*/
color:blue; /* day mode*/
color:white; /* screensaver mode*/
}
/* Affichage du lever et de coucher de soleil */
#tag_sunrise_sunset{
font-family:Arial;
font-size: 90%;
text-align: left;
position: fixed;
top: 55px;
left: 140px;
color:black;
}
/* Affichage des données météorologiques additionnelles */
#tag_additional_weather_information{
font-family:Arial;
font-size: 100%;
text-align: center;
position: fixed;
top: 70px;
left: 450px;
width:250px;
color:black;
}
/* Affichage des alertes météorologiques */
#tag_meteo_alert{
font-family:Arial;
font-size: 100%;
text-align: center;
position: fixed;
top: 15px;
left: 450px;
width:250px;
color:red;
}
/* Affichage de la température */
#tag_temperature{
font-family:Arial;
font-size: 130%;
font-weight: 800;
text-align: left;
position: fixed;
top: 1px;
left: 420px;
color:black; /* night mode*/
color:blue; /* day mode*/
color:white; /* screensaver mode*/
}<!DOCTYPE html>
<!--
Page d'économiseur d'écran, créée le 30.07.2016
modifiée le 02.09.2016
modifiée le 22.10.2016 (no cache)
modifiée le 23.10.2016 (inclusion de la date et de l'heure)
-->
<html>
<head>
<title>Domoos | Screen saver screen</title>
<meta http-equiv="refresh" content="10">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<meta http-equiv="pragma" content="no-cache">
<link rel="stylesheet" type="text/css" href="css/mystyle_saver.css" />
<script type="text/javascript" src="scripts/date_time.js"></script>
<script type="text/javascript" src="scripts/screensaver.js"></script>
</head>
<body onload="init();">
<div style="position:absolute" id="randomPlacement">
<p><a href="index.html"><img src="assets/pictures/texte_sortie_veille.png" alt ="" style="width:60px;height:60px;"></a></p>
</div>
<div id="date"></div>
<div id="time"></div>
<div id="tag_temperature">
<p>16°C</p>
</div>
</body>
</html>我有以下 html 页面:
<!DOCTYPE html>
<html>
<head>
<title>Domoos | Screen saver screen</title>
<meta http-equiv="refresh" content="10">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<meta http-equiv="pragma" content="no-cache">
<link rel="stylesheet" type="text/css" href="css/mystyle_saver.css" />
<script type="text/javascript" src="scripts/date_time.js"></script>
<script type="text/javascript" src="scripts/screensaver.js"></script>
</head>
<body onload="init();">
<div style="position:absolute" id="randomPlacement">
<p><a href="index.html"><img src="assets/pictures/texte_sortie_veille.png" alt ="" style="width:60px;height:60px;"></a></p>
</div>
<div id="date"></div>
<div id="time"></div>
<div id="tag_temperature">
<p>16°C</p>
</div>
</body>
</html>
和以下链接的 CSS 文件(名为“mystyle_saver.css”的文件的摘录):
/* Page entière (utilisé pour avoir une couverture globale en couleur) */
body {
background-color:black; /*screensaver mode*/
}
/* Affichage de date (en haut) */
#date{
font-family:Arial;
font-size: 130%;
font-weight: 800;
text-align: left;
position: fixed;
top: 5px;
left: 20px;
color:white; /* screensaver mode*/
}
/* Affichage d'heure (en haut) */
#time{
font-family:Arial;
font-size: 130%;
font-weight: 800;
text-align: left;
position: fixed;
top: 5px;
left: 300px;
color:white; /* screensaver mode*/
}
/* Affichage de la température */
#tag_temperature{
font-family:Arial;
font-size: 130%;
font-weight: 800;
text-align: left;
position: fixed;
top: 1px;
left: 420px;
color:black; /* night mode*/
color:blue; /* day mode*/
color:white; /* screensaver mode*/
}
现在我面临的问题是:我所有的 div 标签(日期、时间和 tag_temperature)都具有相同的属性:字体系列、大小、粗细……和最高值，但是温度与其余的部分。下面的屏幕截图将更好地说明这一点:
知道我在这里做错了什么吗？
非常感谢您的支持。
最佳答案
那是因为你的体温在<p>具有默认顶部和底部边距的元素。
将此添加到您的 CSS 以将其删除:
p {margin: 0;}
请注意，这可能会对您的文本产生其他不良副作用。
此外，您的 top像素排列与您的日期、时间和温度不同。
JS fiddle 在这里:https://jsfiddle.net/sxz3dfux/
关于html - 为什么我的 div 元素没有垂直对齐？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40221614/