Question

我正在努力使文字看起来像这样：

here goes a nice image.
some text | a small ico

我也想要图片下方的文字，加上分隔符和图标必须与图片中的图片大小相同。

目前看起来像这样：

here goes a nice image.
some text 
| 
a small ico

我不知道他们在彼此之下是因为我在一行中使用col-md *。我该如何解决这个问题？

这是我的代码：

HTML：

<div class="row">
  <div class="col-md-3">
  <img src="http://www.foranyinfo.com/wp-content/uploads/2015/11/motorbike_black_yamaha_r6_74416_3840x2400.jpg" style="width:128;height:128px">
    <div class="row">
        <div class="col-md-6">
             <span class="name">A Beutiful star</span>
        </div>
        <div class="col-md-4">
            <div style="width:32px;height:32px">
                <div class="verticalBar"></div>
             </div>
        </div>
        <div class="col-md-4">
            <img src="https://image.freepik.com/free-icon/rate-star-button_318-76714.jpg" style="width:32px; height:32px" />
        </div>
    </div>
     </div>

的CSS：

.verticalBar {
    border-left:1px solid green;
    height:100%;
}

Answer 1

你可以为内部div添加以下样式吗，

display:inline-block;

Answer 2

您可以display:flex使用.row按照预期结果制作。

.row {
    align-items: center;
    display: flex;
}

<强> Working Fiddle

并在你的小提琴中添加bootstrap插件。

如何对齐此文本？

2 个答案: