Question

＆＃13;

/* 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*/
}

＆＃13;

<!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&deg;C</p>
	</div>
</body>
</html>

＆＃13;

我有以下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&deg;C</p>
    </div>
</body>
</html>

以及以下链接的CSS文件（名为＆＃39; mystyle_saver.css＆＃39;的文件摘录）：

 /* 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）具有相同的属性：font-family，size，weight，...和top值，但是温度与其余的部分。下面的屏幕截图将更好地说明这一点：

知道我在这里做错了吗？

非常感谢您的支持。

Answer 1

这是因为你的温度是<p>元素，它有一个默认的上下边距。

将其添加到CSS中以将其删除：

p {margin: 0;}

请注意，这可能会对您的文字产生其他不良副作用。

此外，您的top像素对齐方式在您的日期，时间和温度上并不相同。

JS在这里小提琴：https://jsfiddle.net/sxz3dfux/

为什么我的div元素没有垂直对齐？

1 个答案: