在 <div> 内的 <p> 内居中按钮 [重复]

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 宽度为 430 像素，而我的图像单独宽度为 170 像素，那么我的段落单独应该是 260 像素。我尝试将“位置：相对和左侧：130px”放在按钮的中心，但它不起作用。

对不起，如果我写的太多，我是一个初学者。

提前谢谢你。

Answer 1

我删除了.acquista中的代码

position: relative;
left: 130px;

然后像这样添加Css：

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

所以会变成这样的sn-p

#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>