```HTML 17:08:46 ``` ```CSS #clock-container { width:700px; height:700px; margin: auto; position: relative; } #clock-container img { width:700px; height:700px; object-fit:cover; } #clock-container p { position: absolute; top: 250px; left: 240px; font-size: 60px; font-family: 'Georgia'; color: #4682b4; } ``` 解説 700x700の#clock-containerブロックを作ってimgとpを収容します。 imgは700x700なので#clock-containerにぴったりフィットします。（なので特に配置の指定も不要） pは(topとleftで)#clock-container内の決まった位置に配置します。(position: absolute) こうすればimgとpの位置がずれることはなくなるわけです。

`#clock`の中に入れればいいんじゃないかと思いました。 ```html --> 17:08:46 ```

aaaaaaaaaaaaaaaaaaaaaaa

解決しました

K_3578

2021/12/16 03:09

意図的に質問内容を抹消するのは禁止されています。それに抹消したところで質問履歴を見れば誰でもわかります。

この質問の投稿者はすでに退会しているため、質問者からの返信がない点にご留意ください。

行動規範の内容に同意します

回答2件

ベストアンサー

HTML
1    <div id="clock-container">
2      <img src="画像の場所">
3      <p>17:08:46</p>
4    </div>

CSS
1#clock-container {
2    width:700px;
3    height:700px;
4    margin: auto;
5    position: relative;
6}
7
8#clock-container img {
9    width:700px;
10    height:700px;
11    object-fit:cover;
12}
13
14#clock-container p {
15    position: absolute;
16    top: 250px;
17    left: 240px;
18    font-size: 60px;
19    font-family: 'Georgia';
20    color: #4682b4;
21}

解説
700x700の#clock-containerブロックを作ってimgとpを収容します。
imgは700x700なので#clock-containerにぴったりフィットします。（なので特に配置の指定も不要）
pは(topとleftで)#clock-container内の決まった位置に配置します。(position: absolute)
こうすればimgとpの位置がずれることはなくなるわけです。

投稿2021/05/13 05:51

編集2021/05/13 06:13

itagagaki

総合スコア8407

退会済みユーザー

2021/05/13 07:32

できました！わかりやすい説明もありがとうございます！

行動規範の内容に同意します

#clockの中に入れればいいんじゃないかと思いました。

html
1<!-- 移動    <p align="center"><img src = "画像の場所"></p> -->
2
3    <div id="clock">
4        <p align="center"><img src = "画像の場所"></p>
5        <p id="myClock">17:08:46</p>
6    </div>