将 <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 的宽度为 430px，而我的图像本身的宽度为 170px，那么我的段落本身应该是 260px。我尝试将“position:relative 和 left:130px”置于按钮中心，但没有用。

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

提前致谢。

Answer 1

我删除了 .acquista

中的代码

position: relative;
left: 130px;

然后像这样添加Css：

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

将 <div> 内的 <p> 内的按钮居中

Centering a button inside a <p> inside a <div>

html

css

image

paragraph