Question

我正在使用Bootstrap＆amp;想要在左边和左边看到徽标在中心的标题。我使用了以下代码但无法获得所需的结果。请指南。

<div class="panel-heading"><a href="#">
<img src="Logo.png" width="10%" height="10%" alt="">
</a>
<h1 align="center">Title</h1></div>

Answer 1

<h1 class="text-center"> 
<a class="pull-left" href="#"> 
<img src="path/logo.png" width="10%" height="10%" alt=""> 
</a><span style="margin-left: -20%;">Title</span></h1>

尝试此代码..标题标记中的任何内容都在一行

Answer 2

演示

为container-fluid

添加pull-left div和<a>

<div class="panel-heading">
  <div class="container-fluid">
    <a href="#" class="pull-left">
      <img src="Logo.png" width="10%" height="10%" alt="">IMG
    </a>
    <h1 align="center">Title</h1></div>
</div>

Answer 3

<div class="panel-heading">
 <div class="container-fluid">
  <div class="pull-left" style="background-color:lavender;">
   <img src="logo.png" width="50px" height="50px" alt="">
  </div>
  <h1 align="center">Title</h1></div>
</div>

根据您的图像要求提供像素大小。

如何获得徽标＆amp;通过bootstrap在同一行上标题

3 个答案: