teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

a

2021/12/16 03:06

投稿

退会済みユーザー
title CHANGED
@@ -1,1 +1,1 @@
1
- 画像の中央にデジタル時計を配置したい
1
+ aaaaaaaaaaaaaaaaaaaaaaa
body CHANGED
@@ -1,70 +1,1 @@
1
- 画像の中央にデジタル時計を配置したいです。以下のコードだと、ウィンドウのサイズを変えたときに時計が画像の中央からずれていってしまいます。常に画像の中央に時計を配置する方法を教えてください。
2
-
3
-
4
-
5
-
6
- ```html
7
- <!DOCTYPE html>
8
- <html lang="ja">
9
- <head>
10
- <meta charset="utf-8">
11
- <title>デジタル時計</title>
12
- <link rel="stylesheet" type="text/css" href="clock.css"/>
13
- </head>
14
-
15
- <body onload="updateClock()">
16
- <div style="z-index:10;">
17
- <h1 align="center">DEGITAL CLOCK</h1>
18
- </div>
19
-
20
- <p align="center"><img src = "画像の場所"></p>
21
-
22
- <div id="clock">
23
- <p id="myClock">17:08:46</p>
24
- </div>
25
-
26
- <script>
27
- function zero(num){
28
- var ret;
29
- if(num<10){ret="0"+num;}
30
- else{ret=num;}
31
- return ret;
32
- }
33
- function updateClock() {
34
- var now = new Date();
35
- var hour =zero(now.getHours());
36
- var minute = zero(now.getMinutes());
37
- var second =zero(now.getSeconds());
38
- document.getElementById('myClock').innerHTML = hour+":"+minute+":"+second;
39
- }
40
- setInterval('updateClock()', 1000);
41
- </script>
42
- </body>
43
- </html>
44
-
45
-
46
- <!--以下css-->
47
- img{
48
- width:700px;
49
- height:700px;
50
- object-fit:cover;
51
- position:relative;
52
- }
53
-
54
- #clock p{
55
- position:absolute;
56
- top:50%;
57
- left: 50%;
58
- transform: translate(-50%, -50%);
59
- -webkit-transform: translate(-50%, -50%);
60
- -ms-transform: translate(-50%, -50%);
61
- font-size:60px;
62
- font-family:'Georgia';
63
- color:#4682b4;
64
- }
65
- ```
66
- ウィンドウを小さくしたとき
67
- ![イメージ説明](f2460416133352eecad981df992dd4eb.png)
68
-
69
- 全画面のとき
1
+ 解決しました
70
- ![イメージ説明](e24721ea127ed9c43050e9eb4e83ce81.png)