在同一行上对齐两个图像和文本boostrap

我基本上有一个文字在两个图像之间，其中一个在右边，另一个在左边但是当我尝试对齐它时，任何一个图像都会到达下一行，而我希望他们在同一行这里的代码在同一行上对齐两个图像和文本boostrap

<div style="background-color:#ddb56c;clear: both; " class="container"> 

    <div class="col-lg-3 col-xs-3 col-sm-3 col-md-3"> 

    </div> 

    <div class="col-lg-6 col-xs-6 col-sm-6 col-md-6" > 
     <div class="clearfix"> 
      <img class="img-responsive pull-left" src="images/Homepage_03.png" style="max-width: 100%;"/> 
      <h1>Maroon Decor</h1> 
      <img class="img-responsive pull-right" src="images/Homepage_05.png" style="max-width: 100%;" /> 

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

来源

2016-08-03 uneeb meer

http://stackoverflow.com/questions/11900457/align-image-to-left-of-text-on-same-line-twitter-bootstrap – Mistalis

我读的可能的复制这个帖子其实我是不同的，因为我有两个图像的左侧图像和文字完全对齐，但问题出现在正确的图像，去第二行 –

你想实际上是什么？图片+ H1 +图像？像这样在屏幕上？确切地说， –

你必须这样做，实际上。你必须划分你的屏幕3 + 6 + 3。把一个图像中div 3然后在文本和div 6然后另一个图像中div 3

**如果您使用的所有col-lg-x col-xs-x col-sm-x col-md-3那么这将是对所有设备相同的设计。

<div class="col-lg-3 col-xs-3 col-sm-3 col-md-3"> 
     <img class="img-responsive pull-left" src="images/Homepage_03.png" style="max-width: 100%;"/> 
    </div> 

    <div class="col-lg-6 col-xs-6 col-sm-6 col-md-6" > 
     <div class="clearfix"> 

      <h1>Maroon Decor</h1> 


     </div> 
    </div> 

    <div class="col-lg-3 col-xs-3 col-sm-3 col-md-3"> 
     <img class="img-responsive pull-right" src="images/Homepage_05.png" style="max-width: 100%;" /> 
    </div> 
</div>

来源

2016-08-03 10:21:44

它完成了这项工作，但移动视图变得混乱了 –

只是使用col-md-3 –

做了诡计！感谢不幸的人不能投票你的解决方案 –

您可以显示标头内联。

<style> 
h1 { 
    display: inline; 
} 
</style>

来源

2016-08-03 10:19:22 RemanBroder

以及那正是我想要的东西只是一件事情是对齐的，但文本是在顶部看起来很漂亮我试图给一些填充，但它不会下来可能的方式让它垂直居中？ –

在同一行上对齐两个图像和文本boostrap

回答

相关问题