html - 堆叠图像和跨度标签彼此相邻 - bootstrap

Question

我想同时对齐 image标记和 p span彼此标记。而且我不想将它们放在两个不同的 div 中以遵循网格系统，因为它不会给我所需的正确最终输出。

这是我要更正的一小段代码:FIDDLE

<div class="row">
    <div>
        <div class="col-md-9 col-md-offset-3" 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

我想要 <p>图片标签旁边的标签。

Answer 1

两种选择

.row p {
    display: inline-block;
}

<div class="row">
    <div>
        <div class="col-md-9 col-md-offset-3" 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>

或

.row img {
  float: left;
}

<div class="row">
    <div>
        <div class="col-md-9 col-md-offset-3" 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>