Question

JSFiddle

<div class="container">
    <img style="margin: 10px;" src="~/Content/Images/x.png"  alt="" width="400"  />
    <span style="margin-left: 50px;" class="h3" >Connecting People & Businesses Since 1992</span>
</div>

以上在桌面浏览器中显示正常。但是，在移动设备上查看时，应保留在图像右侧的文本会包含在图像下方。

<div class="container">
    <img class="col-md-6" src="~/Content/Images/x.png" />
    <span class="col-md-6 h3" >Connecting People & Businesses Since 1992</span>
</div>

那我该怎么开机呢？我尝试过使用col-md-6类，但是在使用网格后，右边的文字不再是垂直居中的。

Answer 1

<div class="container">
    <img class="col-xs-6 col-md-6" src="~/Content/Images/x.png" />
    <span class="col-xs-6 col-md-6 h3" >Connecting People & Businesses Since 1992</span>
</div>

col-md-6表示“平板电脑”尺寸以上的所有内容均使用12列中的6列。因为你没有指定任何东西[这就是你想要的东西，除非你想要它一直到'xs'大小。

这有帮助吗？

Answer 2

您可以使用简单的两列表将“vertical-align：middle”应用于td元素。

如何垂直对齐图像旁边的文本

2 个答案: