将按钮居中 <p> a <div>内部

Question

我有一个页面，上面浮动着多个图像，每个图像都有一个文本。代码如下(不要介意意大利语单词(：

<section id="libri">
<div class="book1">
<img src="images/alberolaura.jpg" height="250px" width="170px" alt="L'albero Laura">
<p><a href="#" target="_blank"><button class="acquista"><i class="fa fa-shopping-cart"></i>  Acquista</button></a> <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur</p>
</div>

这对9张图像重复了9次，你可以看到它们的大小(总是一样的(。正如你所看到的，我有一个按钮，必须放在每一段中，问题是如何使它相对于文本居中。现在，在我的CSS中，我为图像和段落想出了这个：

#libri div {
height: 250px;
width: 430px;
display: inline-block;
overflow: hidden;
float: left;
/*border:1px solid;*/
margin-bottom: 5px;
margin-right: 5px;
}
#libri div>img {
vertical-align: middle;
}
#libri div:hover {
background-color: #5fed8c;
transition: 0.8s ease;
}
#libri p {
display: inline-block;
width: 250px;
text-align: left;
font-family: Lato;
font-size: 17px;
vertical-align: top;
}

这个按钮：

.acquista {
background-color: #9be8b3;
border: 2px solid #000000;
border-radius: 5px;
color: #000000;
padding: 8px 12px;
font-size: 12px;
cursor: pointer;
position: relative;
left: 130px;
}

我试着做了一些数学运算，如果我的div宽度为430px，而我的图像宽度为170px，那么我的段落宽度应该为260px。我试着把"；位置：相对和左侧：130px"；使按钮居中，但它不起作用。

对不起，如果我写得太多了，我还是个初学者。

提前谢谢。

Answer 1

我删除了.acquista中的代码

position: relative;
left: 130px;

然后添加Cs，如下所示：

#libri button {
margin: 0 auto;
display: block;
}

所以会像这个片段一样

#libri div {
height: 250px;
width: 430px;
display: inline-block;
overflow: hidden;
float: left;
/*border:1px solid;*/
margin-bottom: 5px;
margin-right: 5px;
}
#libri div>img {
vertical-align: middle;
}
#libri div:hover {
background-color: #5fed8c;
transition: 0.8s ease;
}
#libri p {
display: inline-block;
width: 250px;
text-align: left;
font-family: Lato;
font-size: 17px;
vertical-align: top;
}
#libri button {
margin: 0 auto;
display: block;
}
.acquista {
background-color: #9be8b3;
border: 2px solid #000000;
border-radius: 5px;
color: #000000;
padding: 8px 12px;
font-size: 12px;
cursor: pointer;
}

<section id="libri">
<div class="book1">
<img src="images/alberolaura.jpg" height="250px" width="170px" alt="L'albero Laura">
<p><a href="#" target="_blank"><button class="acquista"><i class="fa fa-shopping-cart"></i>  Acquista</button></a> <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur</p>
</div>
</section>