- 此问题在此处已有答案**：
Align inline-block DIVs to top of container element（5个答案）
昨天关门了。
I正在尝试使用html和css创建一个水平图像滑块。
这是我的html代码：
<!DOCTYPE html>
<html>
<head>
<title>Image slider</title>
<link rel="stylesheet" type="text/css" href="style3.css">
</head>
<body>
<div class="image-container">
<center>
<div class="image">
<div class="image-box">1</div>
<div class="text-box">
Hello
</div>
</div>
<div class="image">2</div>
<div class="image">3</div>
<div class="image">4</div>
</div>
</center>
</body>
</html>注意：1，2，3，4将在以后被实际的图像所取代。我希望图像适合在年龄框div中，并在它下面的文本框div中-我希望显示一个标题和它的标题名称。
这是我的CSS代码：
.image-container {
vertical-align: middle;
display: inline-block;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
width: 50%;
}
.image {
height: 200px;
width: 200px;
font-size: 25px;
margin: 10px;
display: inline-block;
line-height: 100px;
border: 5px red solid;
}
.image-box{
height:150px;
width: 200px;
background: green;
}
.text-box{
height: 50px;
border-top: 5px red solid;
display: flex;
justify-content: center;
}当我删除文本框内的文本时，我可以正确对齐文本框（见附件中的image-1.png），它也是可滚动的，但当我试图在其中添加文本（如Hello）进行检查时，文本未对齐，超出了范围（见附件image-2.png）。我想让文本只适合这个文本框内，而不是出去。我在网上查了一下，发现了display: flex;和justify-content: center;这样的属性，但是没有任何帮助。有人能帮我纠正这个问题吗？这样文本（比如标题和它的名称）就应该在文本框itseld中了。
1条答案
按热度按时间mbzjlibv1#
使用display：flex应该可以解决您的问题。
也许你有一个 Bootstrap 框架或基础框架，他们是如何解决这个问题，甚至使用它为您的网站。