1
初めてここで質問していますが、これを長年使っています。私は比較的新しいコーディングをしており、私は学校のためのプロジェクトをやっています。DIVを画像スライドショーの中に入れることができません
私はW3schoolsで作成したスライドショーをもとに、自分のウェブサイトに画像スライドショーを作成しています。そのスライドショーの中に半透明のボックス背景を持つキャプションボックスを作成しました。何らかの理由で、私はそのキャプションボックスを水平に中央に置くように見えません。私のスライドショーのコードは、現在次のようになっています：
<!--- Image slideshow --->
<div class="slideshow-container">
<a href="#slideshow" id="slideshow">
<div class="text">
<div class="mySlides fade">
<div class="numbertext">1/5</div>
<img src="images/city2.jpg" style="width:100%">
<div class="text2">Caption 1</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2/5</div>
<img src="images/elevator3.jpg" style="width:100%">
<div class="text2">Caption 2</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3/5</div>
<img src="images/nanotech2.jpg" style="width:100%">
<div class="text2">Caption 3</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4/5</div>
<img src="images/hyperloop3.jpg" style="width:100%">
<div class="text2">Caption 4</div>
</div>
<div class="mySlides fade">
<div class="numbertext">5/5</div>
<img src="images/vfarming2.jpg" style="width:100%">
<div class="text2">Caption 5</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</a>
</div>
このCCSおよびその他のウェブサイトは、下のリンクから見ることができます。画像を同じサイズのプレースホルダに置き換えました。私は親要素（テキスト）
display: inline-block
属性と子要素（テキスト2）
text-align: center
属性が、これは機能しませんでした。私が何をしても何らかの理由でそれは中心にはなりません。どんな助けもありがとうございます。ありがとう！
/* ----------------------------------------------------------------- */
/* Slideshow CSS3 */
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;margin:0}
.mySlides {
\t display:none;
\t width: 100%;
\t max-width: 1300px;
\t height: 600px;
\t margin: 0 auto;
}
.w3-left, .w3-right, .w3-badge {
\t cursor:pointer
}
.w3-badge {
\t height:13px;
\t width:13px;
\t padding:0
}
/* Slideshow container */
.slideshow-container {
\t max-width: 1300px;
\t max-height: 600px;
\t position: relative;
\t margin: auto;
}
.slideshow-container2 {
\t max-width: 650px;
\t height: 300px;
\t position: relative;
\t margin: 0 auto;
}
/* Next & previous buttons */
.prev, .next {
\t cursor: pointer;
\t position: absolute;
\t top: 0;
\t top: 50%;
\t width: auto;
\t padding: 16px;
\t margin-top: -22px;
\t color: white;
\t font-weight: bold;
\t font-size: 18px;
\t transition: 0.6s ease;
\t border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
\t right: 0;
\t border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
\t background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
\t display: inline-block;
}
.text2 {
\t text-align: center;
\t border-radius: 3px;
background: rgba(0,0,0,0.8);
\t color: #f2f2f2;
\t font-size: 15px;
\t padding: 8px 12px;
\t position: absolute;
\t bottom: 16px;
\t width: 60%;
}
/* Number text (1/3 etc) */
.numbertext {
\t color: #f2f2f2;
\t font-size: 12px;
\t padding: 8px 12px;
\t position: absolute;
\t top: 0;
}
/* Fading animation */
.fade {
\t -webkit-animation-name: fade;
\t -webkit-animation-duration: 1.5s;
\t animation-name: fade;
\t animation-duration: 1.5s;
}
@-webkit-keyframes fade {
\t from {opacity: .4}
\t to {opacity: 1}
}
@keyframes fade {
\t from {opacity: .4}
\t to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
\t .slprev, .slnext,.text {font-size: 11px}
}
/* ----------------------------------------------------------------- */EDIT：私はこの質問に関連していると助けるようスニペットにのみCSSを置くことにしましたしました。ここ
は、関連するCSSコードのすべてです他の誰かが簡単に答えを見つけることができます。スニペットを機能させるためには、質問には関係のないコードのほとんどすべてが必要です。完全なコードは、codepenリンクで使用中に見ることができます。
スニペット機能を使用して、関連するCSSコードを含めるようにしてください。 – Xufox
'text2' div _is内のテキストは、ブラウザの中央に表示されます。あなたは何か違うものを見ていますか？または、div自体（黒いバーとして表示）を中心にしたいですか？ –
ああ、ごめんなさい。私は黒いバーを中央に置こうとしています。私はすでにテキストを中心にしています。 –