スライドショーをヘッダーの下の画面中央に表示させたいです。

前提、実現したいこと

webサイトを作成しています。HTMLとCSSでスライドショーを編集したのですが、位置がうまく定まりません。ヘッダーの下で画面の（左右）中央に配置したいです。また今、下の要素と被ってしまっているので、そこも改善したいです。

該当のソースコード

HTML
1<section class="slideshow">
2		<div class="out">
3			<img src="1.jpg">
4			<input type=radio name="slide" id="slide1">
5			<input type=radio name="slide" id="slide2">
6			<input type=radio name="slide" id="slide3">
7			<input type=radio name="slide" id="slide4">
8			<div class="in">
9				<label for="slide1"><span></span><a href="ME2index.html"><img src="Images/image1.png"></a></label>
10				<label for="slide2"><span></span><a href="ME2index.html"><img src="Images/image2.png"></a></label>
11				<label for="slide3"><span></span><a href="ME2index.html"><img src="Images/image3.png"></a></label>
12				<label for="slide4"><span></span><a href="ME2index.html"><img src="Images/image4.png"></a></label>
13			</div>
14		</div>
15		</section>

css
1.out{
2	position: relative;
3}
4.in img{
5	position: absolute;
6	top: 0;
7	left: 0;
8	opacity: 0;
9	transition: .5s;
10	z-index: 0;
11}
12img{
13	display: block;
14	width: 900px;
15	height: auto;
16}
17input{
18	display: none;
19}
20.in{
21	display: flex;
22	justify-content: center;
23}
24label span{
25	display: block;
26	width: 15px;
27	height: 15px;
28	padding: 7px;
29	margin: -40px 0 0;
30	border-radius: 100%;
31	cursor: pointer;
32	position: relative;
33	z-index: 2;
34}
35label span::before{
36	content: "";
37	display: block;
38	width: 100%;
39	height: 100%;
40	background: #4287f5;
41	opacity: 0.5;
42	border-radius: 100%;
43}
44input:nth-of-type(1):checked ~ .in label:nth-of-type(1) span::before,
45input:nth-of-type(2):checked ~ .in label:nth-of-type(2) span::before,
46input:nth-of-type(3):checked ~ .in label:nth-of-type(3) span::before,
47input:nth-of-type(4):checked ~ .in label:nth-of-type(4) span::before{
48	background: #000;
49	opacity: 1;
50}
51label span::before{
52	animation: slidebutton 14s infinite;
53}
54@keyframes slidebutton{
55	0%{opacity: 0.5;background: #4287f5;}
56	3.5%{opacity: 1;background: #000;}/* b÷x×100=y */
57	25%{opacity: 1;background: #000;}/* 100÷c=z */
58	28.5%{opacity: 0.5;background: #4287f5;}/* y+z */
59}
60label:nth-of-type(2) span::before,label:nth-of-type(2) img{
61	animation-delay: 3.5s;
62}
63label:nth-of-type(3) span::before,label:nth-of-type(3) img{
64	animation-delay: 7s;
65}
66label:nth-of-type(4) span::before,label:nth-of-type(4) img{
67	animation-delay: 10.5s;
68}
69input:nth-of-type(1):checked ~ .in label:nth-of-type(1) img,
70input:nth-of-type(2):checked ~ .in label:nth-of-type(2) img,
71input:nth-of-type(3):checked ~ .in label:nth-of-type(3) img,
72input:nth-of-type(4):checked ~ .in label:nth-of-type(4) img{
73	opacity: 1;
74	z-index: 1;
75}
76.in img{
77	animation: slide 14s infinite;/* (a+b)×c=x */
78	opacity: 0;
79}
80@keyframes slide{
81	0%{opacity: 0;}
82	3.5%{opacity: 1;z-index: 1;}/* b÷x×100=y */
83	25%{opacity: 1;}/* 100÷c=z */
84	28.5%{opacity: 0;z-index: 0;}/* y+z */
85}
86input:checked ~ .in img,input:checked ~ .in span::before{
87	animation: none;
88}
89.in:hover img,.in:hover span::before{
90	animation-play-state:paused;/* マウスを載せると一時停止 */
91}


<section class="tech-block">
		<h2>Technology</h2>
			<section class="tech-item">
				<section class="tech">
					<a href="#">
						<iframe class="video" width="560" height="315" src="https://www.youtube-nocookie.com/embed/ccTikqRF9ls?controls=0&amp;start=60" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
						<div class="tech-text">
						<div class="category">tech-No.1</div>
						<p class="description">We offer industrial robots in a wide range of 
						versions with various.</p>
						</div>
					</a>
				</section>
		
				<section class="tech"><br>
					<a href="#">
						<iframe class="video" width="560" height="315" src="https://www.youtube-nocookie.com/embed/rMi3XtG0ZWc?controls=0&amp;start=60" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
						<div class="tech-text">
						<div class="category">tech-No.2</div>
						<p class="description">We offer industrial robots in a wide range of versions with various.</p>
						</div>
					</a>
				</section>
			</section>
			
			<section class="tech-item">
				<section class="tech"><br>
					<a href="#">
						<iframe class="video" width="560" height="315" src="https://www.youtube-nocookie.com/embed/3zmMHrxAMaA?controls=0&amp;start=60" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
						<div class="tech-text">
						<div class="category">tech-No.3</div>
						<p class="description">We offer industrial robots in a wide range of versions with various.</p>
						</div>
					</a>
				</section>
		
				<section class="tech"><br>
					<a href="#">
						<iframe class="video" width="560" height="315" src="https://www.youtube-nocookie.com/embed/DIfJ96qgIpc?controls=0&amp;start=60" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
						<div class="tech-text">
						<div class="category">tech-No.4</div>
						<p class="description">We offer industrial robots in a wide range of versions with various.</p>
						</div>
					</a>
				</section>
			</section>
		</section>

.tech-block .h2 {
	margin-top: 0px;
	margin-bottom: 0.4em;
	margin-left: 30px;
	font-size: 1.8rem;
	line-height: 1.3;
	font-weight: 500;
}
.tech {
	width: 1250px;
	margin-bottom: 130px;
	margin-right: 10px;
	margin-left: 10px;
	padding: 8px;
	border-radius: 5px;
	background-color: #000000;
	display: flex;
}
.tech .video {
	width: 560px;
	margin-left: 60px;
	margin-top: 40px;
	margin-bottom: 40px;
}
.tech .tech-text {
	width: 900px;
	margin-right: 60px;
	margin-top: 90px;
} 
.tech .category {
	margin: 45px 9px 10px;
	color: #F7DC01;
	letter-spacing: 1px;
	font-family: "Bebas Neue",sans-serif;
	font-size: 17px;
}	
.tech .category::before {
	content: '';
	display: inline-block;
	width: 19px;
	height: 19px;
	margin-right: 5px;
	margin-left: 20px;
	border: 2px solid;
	border-radius: 50%;
	vertical-align: -5px;
}
.tech .description {
	margin: 30px;
	line-height: 1.5;
}
.tech > a {
	display: flex;
	margin: -8px -8px -11px;
	padding: 8px 8px 11px;
	border-radius: inherit;
	color: #FFF;
	transition: all 0.3s;
}
.tech > a:hover {
	box-shadow: 0 0 6px -1px rgba(0, 0, 0, 0.3);
	opacity: 0.8;
}```

### 現在の状況
![イメージ説明](8691e13be6d7f67b267d213e49cddd28.png)

Lhankor_Mhy

2021/07/13 09:14

ご提示のコードを試してみましたが、「下の要素と被ってしまっている」という問題は確認できませんでした。下の要素の問題かもしれませんね。

Kiiko1

2021/07/13 10:03

下の要素のコードを追加させていただきました。

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

回答1件

ベストアンサー

margin:0 autoが手っ取り早いかもしれません。
以下を追加するとどうでしょうか。

css
1.out {
2	width: max-content;
3	margin: 0 auto;
4}

投稿2021/07/13 09:17

Lhankor_Mhy

総合スコア36960

Kiiko1

2021/07/13 10:01

回答ありがとうございます。上記のコードを追加したら、画面中央には表示することができました。ですが、尚下の要素とかぶってしまいます。

Lhankor_Mhy

2021/07/13 10:03

補足依頼欄にも書きましたが、その現象は確認できませんでした。下の要素に問題があるのかもしれないですね。

Kiiko1

2021/07/13 10:22

下の要素のコードを追加させていただきました

itagagaki

2021/07/13 10:57

.inの中でimgはabsolute指定しているので、それは存在していないものとして.inはレイアウトされます。つまり.inの高さはimg以外の要素の分しか無いです。なんとかして画像の高さを.inの高さに加える必要があります。画像の高さが不定だと難しいですが、もし決まっているのなら単純に.inにheightを与えれば良いかと。

Kiiko1

2021/07/13 11:07

細かくご指摘ありがとうございます。解決しました！！本当に助かりました♪

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