我的页面上有多张浮动的图片，每张图片都有一个文字。代码看起来像这样（不要介意意大利语）：

<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。我尝试将“ position：relative and left：130px”置于按钮中心，但这没有用。

抱歉，如果我写的太多了，我是一个初学者。

先感谢你。