时间戳

首页 > 解决方案 > 在 a 中居中按钮

在一个里面

html - 在 a 中居中按钮

在一个里面

问题描述

我有一个页面浮动多个图像，每个图像都有一个文本。代码如下所示（不要介意意大利语）：

<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”放在按钮的中心，但它没有用。

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

先感谢您。

标签： htmlcssimageparagraph

解决方案

我删除了代码.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>

推荐阅读