Html 如何水平对齐引导缩略图

我知道这是一个愚蠢的问题，但有人能告诉我如何水平排列

引导缩略图吗

当前缩略图是垂直放置的（一个在另一个之下）

这是我的两个缩略图的代码片段

<div class="row">
        <div class="col-sm-6 col-md-4">
            <div class="thumbnail">
                <img src="photos/square.png" alt="...">
                <div class="caption">
                    <h3 style="font-size:16px;position:relative;left:35px;top:-27px;font-family:Myriad Pro;color:white;">Software Name</h3>
                    <p>...</p>
                    <p><a href="#" class="btn btn-primary btn-ok" role="button">Read More</a></p>
                </div>
            </div>
        </div>
    </div>

    <div class="row"> 
        <div class="col-sm-6 col-md-4">
            <div class="thumbnail">
                <img src="photos/square.png" alt="...">
                <div class="caption">
                    <h3 style="font-size:16px;position:relative;left:35px;top:-27px;font-family:Myriad Pro;color:white;">Software Name</h3>
                    <p>...</p>
                    <p><a href="#" class="btn btn-primary btn-ok" role="button">Read More</a></p>
                </div>
            </div>
        </div>
    </div>


软件名


软件名



下面是它是如何放置的屏幕截图

删除
div及其相应的结束标记。现在，您正通过使用它们将它们强制为一个单独的“行”，从而形成垂直排列。
删除
div及其相应的结束标记。现在，您正通过使用它们将它们强制为一个单独的“行”，从而形成垂直排列。
您创建了两个“行”。相反，请尝试以下方法：

<div class="row">
<div class="col-sm-6 col-md-4">
    <div class="thumbnail">
        <img alt="..." src="photos/square.png">
        <div class="caption">
            <h3 style="font-size:16px;position:relative;left:35px;top:-27px;font-family:Myriad Pro;color:white;">Software Name</h3>
            <p>...</p>
            <p><a class="btn btn-primary btn-ok" href="#" role="button">Read More</a></p>
        </div>
    </div>
    <div class="thumbnail">
        <img alt="..." src="photos/square.png">
        <div class="caption">
            <h3 style="font-size:16px;position:relative;left:35px;top:-27px;font-family:Myriad Pro;color:white;">Software Name</h3>
            <p>...</p>
            <p><a class="btn btn-primary btn-ok" href="#" role="button">Read More</a></p>
        </div>
    </div>
</div>


软件名


软件名



您创建了两个“行”。相反，请尝试以下方法：

<div class="row">
<div class="col-sm-6 col-md-4">
    <div class="thumbnail">
        <img alt="..." src="photos/square.png">
        <div class="caption">
            <h3 style="font-size:16px;position:relative;left:35px;top:-27px;font-family:Myriad Pro;color:white;">Software Name</h3>
            <p>...</p>
            <p><a class="btn btn-primary btn-ok" href="#" role="button">Read More</a></p>
        </div>
    </div>
    <div class="thumbnail">
        <img alt="..." src="photos/square.png">
        <div class="caption">
            <h3 style="font-size:16px;position:relative;left:35px;top:-27px;font-family:Myriad Pro;color:white;">Software Name</h3>
            <p>...</p>
            <p><a class="btn btn-primary btn-ok" href="#" role="button">Read More</a></p>
        </div>
    </div>
</div>


软件名


软件名



删除第二行并添加一些CSS，使缩略图具有固定的宽度和内联流

编辑：添加了一些CSS以实现没有图像的背景色


缩略图{
边框：1px黑色实心；
宽度：180px；
显示：内联块；
背景色：白色；
高度：300px；
}
1.绿地{
保证金：3倍；
高度：150像素；
背景色：#3ECE30；
}
.绿色空间.空白空间{
高度：120px；
}
.绿地h3{
字体大小：16px；
字体系列：Myriad Pro；
颜色：白色；
背景色：#1F641A；
文本对齐：居中；
高度：22px；
线高：22px；
}
.标题{
位置：相对位置；
高度：计算（100%-150px）；
文本对齐：居中；
}
.caption.btn{
位置：绝对位置；
底部：10px；
左：50%；
左边距：-45px；
}

软件名

软件名

删除第二行并添加一些CSS，使缩略图具有固定的宽度和内联流

编辑：添加了一些CSS以实现没有图像的背景色


缩略图{
边框：1px黑色实心；
宽度：180px；
显示：内联块；
背景色：白色；
高度：300px；
}
1.绿地{
保证金：3倍；
高度：150像素；
背景色：#3ECE30；
}
.绿色空间.空白空间{
高度：120px；
}
.绿地h3{
字体大小：16px；
字体系列：Myriad Pro；
颜色：白色；
背景色：#1F641A；
文本对齐：居中；
高度：22px；
线高：22px；
}
.标题{
位置：相对位置；
高度：计算（100%-150px）；
文本对齐：居中；
}
.caption.btn{
位置：绝对位置；
底部：10px；
左：50%；
左边距：-45px；
}

软件名

软件名

删除第二行div和其上方的结束div，它们将彼此相邻

<div class="row"> creates a new row

创建新行
删除第二行div和其上方的结束div，它们将彼此相邻

<div class="row"> creates a new row

创建新行
您正在将缩略图放在不同的
行中。只需删除第二个
，您就可以将缩略图放在不同的
行中。只需删除第二个
尝试调整窗口大小或使用
col-xs-6
而不是sm:）尝试调整窗口大小或使用
col-xs-6
而不是sm:）这看起来不错，但My image square.png已调整大小。它显示在屏幕的较大部分。你能告诉我为什么吗？你能帮我个忙，给我发张图片/截图吗？现在没事了。我不得不为这个新职位写一个内联css，否则看起来很笨拙，就像我说的：）非常感谢你，很高兴我能帮上忙！但是有一个问题，先生。即使我将它们水平对齐，它也会显示一个很大的空白（使垂直滚动条相当长）。我附上了一个截图：这看起来不错，但是我的image square.png已经调整了大小。它显示在屏幕的较大部分。你能告诉我为什么吗？你能帮我个忙，给我发张图片/截图吗？现在没事了。我不得不为这个新职位写一个内联css，否则看起来很笨拙，就像我说的：）非常感谢你，很高兴我能帮上忙！但是有一个问题，先生。即使我将它们水平对齐，它也会显示一个很大的空白（使垂直滚动条相当长）。我附上了一个屏幕截图：这个很好用，但是现在square.png变得更大了。比以前大