Css 在幻灯片div中定位元素

我正在尝试创建一个幻灯片，并让文本元素与下面的图像示例中的图像对齐。我试图使用显示网格来显示元素，但我已经在这上面停留了很长时间

有人有什么建议吗

这是我的钢笔

HTML

---

因为您使用的是JS，所以可以将数字放在与

next/previous

相同的包装器中，并动态更改值

我还更正了一些与网格相关的值，并删除了无用的样式

var slideIndex=1；
var index=document.queryselectoral（“.numbertext span”）；
var slides=document.getElementsByClassName（“mySlides”）；
索引[1]。innerHTML=slides.length；
放映幻灯片（幻灯片索引）；
函数加滑块（n）{
放映幻灯片（幻灯片索引+=n）；
}
功能当前幻灯片（n）{
放映幻灯片（幻灯片索引=n）；
}
功能演示幻灯片（n）{
var i；
如果（n>幻灯片长度）{
slideIndex=1
}
if（n<1）{
slideIndex=slides.length
}
索引[0]。innerHTML=slideIndex；
对于（i=0；i

正文{
保证金：0；
溢出x：隐藏；
字体系列：helvetica，无衬线；
背景色：#fff；
}
* {
字体大小：400；
}
img{
保证金：0；
填充：0；
最大宽度：100%；
}
/*/////////////////////2.纯社论/////////////////////*/
巴里先生{
背景色：#e2be9f；
}
.包装纸{
填充：100px；
}
迈斯利德斯先生{
网格列开始：2；
网格行：1/span 2；/*添加了此*/
}
.形象{
宽度：38vw；
}
/*幻灯片容器*/
.slideshow容器{
填充：80px；
显示：网格；
网格模板列：重复（2，1fr）；
}
.nextprevious{
网格列开始：1；
网格行开始：2；
页边距顶部：自动；/*添加此*/
}
/*下一步和上一步按钮*/
.prev，
.下一个{
光标：指针；
颜色：白色；
字体大小：400；
字号：18px；
显示：内联块；
用户选择：无；
}
/*数字文本（1/3等）*/
.numbertext{
颜色：#fff；
字体大小：12px；
填充：8px 12px；
显示：内联块；
}
/*褪色动画*/
.褪色{
动画名称：淡入淡出；
动画持续时间：1s；
}
@关键帧淡入淡出{
从{
不透明度：.4
}
到{
不透明度：1
}
}
.包装纸{
填充：100px；
}

裸体精品运动
以前的
下一个
(3 / 3)

---

如果您只想与幻灯片对齐，可以使用减号边距和对齐，但如果您想保持网格，我认为必须以您开发的方式更改结构。html结构可能无法获得您的输出。对html进行了一些更改：结构将其展平。
对CSS:已使用的网格区域进行了更改。
对JavaScript进行了更改：更改类名而不是样式

var slideIndex=1；
放映幻灯片（幻灯片索引）；
函数加滑块（n）{
放映幻灯片（（幻灯片索引+=n））；
}
功能当前幻灯片（n）{
放映幻灯片（（幻灯片索引=n））；
}
功能演示幻灯片（n）{
var i；
var slides=document.getElementsByClassName（“mySlides”）；
var dots=document.getElementsByClassName（“dot”）；
如果（n>幻灯片长度）{
slideIndex=1；
}
if（n<1）{
slideIndex=slides.length；
}
用于（幻灯片的var幻灯片）{
幻灯片.classList.remove（“活动”）；
}
for（点的可变点）{
点.类列表.删除（“活动”）；
}
幻灯片[slideIndex-1]。类列表。添加（“活动”）；
点[slideIndex-1].classList.add（“活动”）；
}

.mySlides{
显示：无；
}
.mySlides.active{
显示：块；
}
身体{
保证金：0；
溢出x：隐藏；
字体系列：helvetica，无衬线；
宽度：100%；
身高：100%；
背景色：#fff；
}
* {
字体大小：400；
}
img{
保证金：0；
填充：0；
最大宽度：100%；
}
/*/////////////////////2.纯社论/////////////////////*/
巴里先生{
保证金：0；
宽度：100vw；
背景色：#e2be9f；
显示：块；
位置：相对位置；
身高：100%；
}
.包装纸{
填充：100px；
}
迈斯利德斯先生{
网格区域：图像；
自我辩护：结束；
自我对齐：结束；
}
.形象{
宽度：38vw；
}
/*幻灯片容器*/
.slideshow容器{
宽度：100%；
填充：80px；
框大小：边框框；
显示：网格；
网格模板列：最小内容最小内容自动；
网格模板区域：“标题图像”“上一个下一个计数图像”；
/*网格模板列：重复（2，1fr）*/
}
.slideshow容器h1{
网格区域：标题；
}
多特先生{
网格面积：计数；
显示：无；
自我对齐：结束；
空白：nowrap；
颜色：#fff；
字体大小：12px；
填充：8px 12px 0；
}
.dot.active{
显示：块；
}
/*下一步和上一步按钮*/
.prev，
.下一个{
光标：指针；
颜色：白色；
字体大小：400；
字号：18px；
显示：内联块；
用户选择：无；
显示器：flex；
对齐项目：柔性端；
}
上一篇{
网格区域：上一个；
填充：8px 12px 0；
}
.下一个{
网格区域：下一个；
填充：8px 12px 0；
}
/*褪色动画*/
.褪色{
-webkit动画名称：淡入淡出；
-webkit动画持续时间：1s；
动画名称：淡入淡出；
动画持续时间：1s；
}
@-webkit关键帧淡入淡出{
从{
不透明度：0.4；
}
到{
不透明度：1；
}
}
@关键帧淡入淡出{
从{
不透明度：0.4；
}
到{
不透明度：1；
}
}
.包装纸{
填充：100px；
}

裸体精品运动
1/3
2/3
3/3
以前的
下一个

你的问题是什么？如果你看笔，元素没有定位我想说的是什么？是的，上一个/下一个按钮，它们没有与幻灯片图像对齐谢谢你的回复，这太完美了！唯一的问题是，nextprevious div仍然显示块，而不是与幻灯片图像内联

<div class="bareEditorial">
    <div class="slideshow-container">
<h1>Bare Boutique Campaign</h1>
 <div class="mySlides fade">

<div class="numbercounter">
<div class="numbertext">1 / 3</div>
</div>

<div class="image">
<img src="https://static1.squarespace.com/static/5a24d00449fc2b2179f0b620/t/5c7118acc830251242312b94/1550915797860/web+7.jpg?format=2500w" onclick="plusSlides(1)">
  </div>
</div>

<div class="mySlides fade">
<div class="numbertext">2 / 3</div>

<div class="image">
<img src="https://static1.squarespace.com/static/5a24d00449fc2b2179f0b620/5c7116541905f442e8f008e0/5c7124951905f442e8f048fd/1550918837321/web+3.jpg?format=1000w" onclick="plusSlides(1)">
    </div>
</div>

<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<div class="image">
<img src="https://static1.squarespace.com/static/5a24d00449fc2b2179f0b620/t/5c711846ec212dd3a55665b8/1550915727165/web+5.jpg?format=2500w" onclick="plusSlides(1)">
</div>
</div>

<div class="nextprevious">   
<a class="prev" onclick="plusSlides(-1)">Next</a>

<a class="next" onclick="plusSlides(1)">Previous</a>
</div>   
</div>
</div>

.bareEditorial {
  margin: 0;
  width: 100vw;
  background-color: #e2be9f;
  display: block;
  position: relative;
  height: 100%;
}

.image {
  width: 38vw;
  grid-column-start: 2;
}

/* Slideshow container */
.slideshow-container {
  width: 100%;
  padding: 80px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding: 100px;
}

.numbercounter {
  grid-column-start: 1;
  display: inline-block;
}

.nextprevious {
  grid-column-start: 1;
  grid-row-start: 2;
  display: inline-block;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  color: white;
  font-weight: 400;
  font-size: 18px;
  display: inline-block;
  user-select: none;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #fff;
  font-size: 12px;
  padding: 8px 12px;
  display: inline-block;
  grid-column-start: 1;
}

.nextprevious {
    grid-column-start: 1;
    grid-row-start: 2;
    display: inline-block;
    margin: -40px 0 0 0;
}