创建 HTML
- 创建三个具有以下类名的 <div> 元素：“left”、“right”和“center”。
- 将要居中的图像的链接复制并粘贴到 <img> 的 src 属性中，然后将其放置在第三个 <div> 中。
<div class="left"></div> <div class="right"></div> <div class="center"> <img src="https://onitroad.com/pencil.png"> </div>
添加 CSS
- 为左右容器设置背景颜色。
- 定义容器的宽度和高度。
- 使用 float 属性使元素向左和向右浮动。
- 设置中间容器的高度和背景颜色，并将其溢出设置为“隐藏”。
.left {
background-color: #de6502;
width: 150px;
height: 600px;
float: left;
}
.right {
background-color: #1c87c9;
width: 150px;
height: 600px;
float: right;
}
.center {
height: 600px;
background-color: #cccccc;
overflow: hidden;
}
所以，这是完整的代码
在具有 float 属性的容器之间居中图像的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
body {
background-color: #ffffff;
}
.left {
background-color: #de6502;
width: 150px;
height: 600px;
float: left;
}
.right {
background-color: #1c87c9;
width: 150px;
height: 600px;
float: right;
}
.center {
height: 600px;
background-color: #cccccc;
overflow: hidden;
text-align: center;
}
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="center">
<img src="https://onitroad.com/pencil.png">
</div>
</body>
</html>
使用 display 属性的“flex”值在容器之间居中图像的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
body {
background-color: #ffffff;
}
.center {
flex-grow: 1;
background-color: #cccccc;
overflow: hidden;
text-align: center;
}
.flex {
flex-basis: 100%;
display: flex;
}
.flex div {
flex-basis: 150px;
height: 600px;
}
.flex div:first-child {
background-color: #1c87c9;
}
.flex div:last-child {
background-color: #de6502;
}
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="flex">
<div></div>
<div class="center">
<img src="https://onitroad.com/pencil.png">
</div>
<div></div>
</div>
</body>
</html>
使用 display 属性的“inline-block”值在容器之间居中图像的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
body {
background-color: #ffffff;
}
.content {
width: 100%;
}
.content div {
display: inline-block;
width: 150px;
height: 600px;
}
.content div:first-child {
background-color: pink;
}
.content div:last-child {
background-color: purple;
}
.content .center {
width: calc(100% - 300px);
background-color: lightblue;
overflow: hidden;
text-align: center;
margin: 0 -5px;
}
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="content">
<div></div>
<div class="center">
<img src="https://onitroad.com/pencil.png">
</div>
<div></div>
</div>
</body>
</html>
现在是一个常见的问题“如何使图像具有响应性并将其保持在容器之间”。
按照给定的步骤解决此问题。
日期：2020-06-02 22:14:59 来源：oir作者：oir