Question

<div class="carousel-item-top">
    <img class="img-responsive" alt="a" src="carousel/crsl-img-1.png">
    <div class="carousel-item-top-hover">
        <div class="buttons">
            <a class="button btn" href="#">view larger</a>
            <a class="button btn" href="#">more details</a>
        </div>
    </div>
</div>

这是这段代码的html。按钮btn类中的文本我想要居中，但由于某种原因它不响应text-align：center

.carousel-item-top {
    position: relative;
}

.carousel-item-top-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #219fd1;
    opacity: 0;
}

.carousel-item-top-hover .buttons {
    width: 100%;
    top: 45%;
    position: absolute;
    text-align: center;
    left: 0;
}

.carousel-item-top-hover .buttons .button {
    border-radius: 3px;
    background-color: rgba(0,0,0,0.85);
    padding: 6px 5px;
    text-align: center;
    text-transform: capitalize;
    font-family: 'Roboto', Arial, sans-serif;
    font-weight: 700;
    color: #ffffff;
    display: inline-block;
    margin: 4px;
}

.carousel-item-top-hover .buttons .button:hover {
    text-decoration: none;
}

这是关于反叛元素及其相关新邻居的CSS。任何人都有任何想法，为什么它不起作用？

Answer 1

A-公顷！它似乎从某个地方有一个文本缩进，所以我在按钮类中将其设置为none。

文本不在div内

1 个答案: