php 在显示的图片两侧居中添加导览按钮,显示的图片使用<img src='data:image/jpeg;base64,$show_image' alt='图片'>方法显示的
时间: 2024-03-24 15:36:27 浏览: 101
要在显示的图片两侧居中添加导览按钮,可以使用以下的HTML和CSS代码:
HTML代码:
```html
<div class="image-container">
<img src='data:image/jpeg;base64,$show_image' alt='图片'>
<div class="navigation-buttons">
<button class="prev-button">上一张</button>
<button class="next-button">下一张</button>
</div>
</div>
```
CSS代码:
```css
.image-container {
position: relative;
display: inline-block;
}
.navigation-buttons {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
text-align: center;
}
.prev-button,
.next-button {
background-color: #333;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 4px;
margin: 0 10px;
cursor: pointer;
}
.prev-button:hover,
.next-button:hover {
background-color: #555;
}
```
这里使用了一个父容器来包含图片和导航按钮,父容器需要设置为相对定位。导航按钮的容器使用绝对定位,并使用了 `top: 50%` 和 `transform: translateY(-50%)` 来将其垂直居中。导航按钮使用了 `display: inline-block` 来使其水平排列,通过设置左右的 `margin` 来使其居中。最后,通过设置 `cursor: pointer` 来让按钮具有点击效果。
阅读全文