.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; } echo " <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> ";怎么使图片也居中显示
时间: 2024-02-14 16:16:47 浏览: 36
要让图片也居中显示,可以在 `.image-container` 中添加 `text-align: center;` 属性,这样图片就会水平居中显示了。修改后的 CSS 代码如下:
```css
.image-container {
position: relative;
display: inline-block;
text-align: center;
}
.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;
}
```
这样就可以让图片和导航按钮同时居中显示了。
相关问题
.image-container { position: relative; display: inline-block; text-align: center; } .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; } echo " <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> "; 代码中<img src='data:image/jpeg;base64,$show_image' alt='图片'>无法将图片在网页的中间显示?
如果图片不能在网页中间显示,可能有以下几个原因:
1. 图片本身的大小不够大,无法占满父容器,导致无法居中显示。可以尝试给图片添加 `width: 100%;` 或 `max-width: 100%;` 来让其占满父容器。
2. 父容器的宽度不够大,无法容纳图片和导航按钮。可以尝试增加父容器的宽度或使用 `margin: 0 auto;` 来让其水平居中。
3. 其他样式的影响。可以检查其他样式是否会影响图片的居中显示。
修改后的代码如下:
```css
.image-container {
position: relative;
display: inline-block;
text-align: center;
width: 100%;
}
img {
max-width: 100%;
}
.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;
}
```
注意,这里给 `.image-container` 添加了 `width: 100%;` 和给 `img` 添加了 `max-width: 100%;`,以确保图片能够占满整个父容器。同时,也可以尝试在 `img` 中添加 `margin: 0 auto;` 来让其水平居中。
display: inline-block
The "display: inline-block" property in CSS allows an element to be displayed as an inline-level block container. This means that the element will behave like an inline element (it will flow along with other inline elements in the same line) but can also have its own width, height, margin, padding, and border properties.
Inline-block elements are commonly used for creating horizontal navigation menus, buttons, and other inline elements that need to have specific dimensions and styling. They are also useful for creating multi-column layouts where the columns need to wrap to the next line when the container width is limited.
The "display: inline-block" property can be applied to any block-level element, such as div, p, h1, etc. and is supported by all modern web browsers.
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)