html - 中心堆栈图像和 span 标签 - bootstrap

Question

我想为 xs 设备依次堆叠 image、first span 和 second span .对于 xs 设备，它应该居中对齐。

这是我的一段代码:FIDDLE

<div class="row">
    <div>
        <div class="col-md-9 col-md-offset-3 col-sm-10 col-sm-offset-2" style="padding-right:0px">
            <img src="Images/signin_logo.jpg" width="150" height="110" />
            <p> <span style="color:#989898; font-size:36px">Template Fire Sign In</span>
                <br /> <span style="color:#A8A8A8; font-size:18px">Please sign in with your credentials now to get access.</span>

            </p>
        </div>
    </div>
</div>

我正在努力实现这样的目标:FIDDLE

      Image
     Span One
  Span Second...
     ........

Answer 1

添加此 CSS。它会给你你想要得到的东西。但请记住，您将获得以 767 像素或更小宽度为中心的元素显示，您可以通过更改 max-width 的值来更改。

@media only screen and (max-width: 767px){
    .row img,
    .row p{
        display:block;
        margin: 10px auto;
        text-align: center;
    }
}