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

Question

我想为image设备依次堆叠first span，second span和xs。它应该是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。它会给你你想要的东西。但请记住，您将获得以767px宽度或更小宽度为中心的元素，您可以通过更改max-width的值来更改。

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