Question

我正在学习HTML和CSS，所以我不是很好。我像这样制作图像滑块 - https://websites.co.in/

包括一个容器中的图像和文本。我能够正确旋转图像和文本，但在对齐文本时遇到问题。这就是我所做的 - https://ajaygohel.000webhostapp.com

我想要与第一个链接完全相同的文本对齐。

滑块的Html代码

<div id="container">
    <span class="right"><p>1</p></span>
    <img class="slides" src="images/slider1.jpg">
    <span class="right"><p>2</p></span>
    <img class="slides" src="images/slider2.jpg">
    <span class="right"><p>3</p></span>
    <img class="slides" src="images/slider3.jpg">
    <span class="right"><p>4</p></span>
    <img class="slides" src="images/slider4.jpg">
    <span class="right"><p>5</p></span>
    <img class="slides" src="images/slider5.jpg">
    <button class="btn" onclick="plusIndex(-1)" id="btnprev">&#10094;</button>
    <button class="btn" onclick="plusIndex(1)" id="btnnext">&#10095;</button>   
</div>

CSS代码

#container{
width: 90%;
height: 450px;
border: 1px solid black;
margin: 0 auto;
position: relative;
}
#container img{
width: 50%;
height: 100%;
position: absolute;
float: right;
}
#container .btn{
position: absolute;
width: 40px;
height: 40px;
border: none;
border-radius: 25px;
top: 200px;
background: black;
color: white;
font-size: 20px;
}
#container #btnprev:hover{
box-shadow: 10px 0 20px 0 black;
}
#container #btnnext{
position: relative;
float: right;
}
#container #btnnext:hover{
box-shadow: -10px 0 20px 0 black;
}
.right{
float: right;
position: relative; 
}
.right p{
text-align: center;
}

Answer 1

当容器没有填充滑块宽度的一半时，您将段落本身居中。您需要做的是将正确的容器（.right）扩展到正确的宽度并将其所有内容放在中心位置：

.right {
    float: right;
    position: relative; 
    width: 50%; /* MAKE THE CONTAINER THE RIGHT SIZE */
    text-align: center; /* CENTER ALL TEXT INSIDE THIS */
}

.right p {
    /* text-align: center; <= THIS ISN'T NEEDED */
}

您的下一个按钮也放置了浮动，而不是使用已应用于其.btn类的绝对定位。要在更改文本后修复此问题，请删除浮动和相对定位覆盖，并设置right: 0（将其从滑块右侧移动零像素）：

#container #btnnext {
    right: 0; /* <= ADD THIS (or set in pixels to add distance from edge) */
    /* position: absolute; <= REMOVE THIS */
    /* float: right; <= REMOVE THIS */
}

Answer 2

您只需要在＆＃34; .right＆＃34;中添加宽度和对齐属性。类似

.right {
width : calc(100% / 2);
text-align : center;
}

无法使用CSS对齐图像滑块中的文本

2 个答案: