让图片在 DIV 中居中可以使用 CSS 实现。下面是操作步骤和两个示例说明：
步骤
- 在 JSP 文件中，使用
<div>标签定义包含图片的容器。 - 给此 div 标签设置宽度、高度、背景等样式，使其成为一个完整的盒子。
- 在 div 中嵌套
img标签，定义图片的地址和大小。 - 在 CSS 样式文件中，使用
text-align: center;属性将 div 中的内容水平居中。 - 给 div 设置
display: flex;和justify-content: center;属性，使 div 和其内部的子元素在垂直方向上居中。
示例1
下面是一个简单的例子，在这个例子中，我们将一张图片放在 div 容器中居中显示。
JSP 文件
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片居中示例</title>
<style>
.container {
width: 400px;
height: 300px;
background-color: #ccc;
text-align: center;
display: flex;
justify-content: center;
}
.container img {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="container">
<img src="img/pic1.jpg" alt="pic1">
</div>
</body>
</html>
CSS 文件
.container {
width: 400px;
height: 300px;
background-color: #ccc;
text-align: center;
display: flex;
justify-content: center;
}
.container img {
width: 200px;
height: 200px;
}
示例2
下面是一个稍微复杂一些的例子，在这个例子中，我们将两张图片放在同一个 div 容器中并使其居中显示。
JSP 文件
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片居中示例</title>
<style>
.container {
width: 400px;
height: 300px;
background-color: #ccc;
text-align: center;
display: flex;
justify-content: center;
}
.container img {
width: 150px;
height: 150px;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<img src="img/pic1.jpg" alt="pic1">
<img src="img/pic2.jpg" alt="pic2">
</div>
</body>
</html>
CSS 文件
.container {
width: 400px;
height: 300px;
background-color: #ccc;
text-align: center;
display: flex;
justify-content: center;
}
.container img {
width: 150px;
height: 150px;
margin: 10px;
}
以上两个示例都是在 div 容器中放置一张或多张图片，使图片在水平和垂直方向上都居中显示。如果需要显示更多图片，只需要在 div 容器中添加更多的 img 标签即可。
阅读剩余 61%
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Jsp中如何让图片在div中居中 - Python技术站
微信扫一扫 
支付宝扫一扫 