php - 使用 bootstrap 将文本和图像并排对齐

Question

如何让图像在文本和按钮旁边居中？图片在左边，因为我放置了 float:left，但如果我不放置它，图片会居中，但文本会在它下面。使用 Bootstrap 3.3.7

 <div class="container">
    <div class="row">        
        <div class="col-md-4 col-xs-12">
            <img src="images/hand.jpg"class="img-responsive"/>
        </div>
        <p>Some text heree</p>
        <h1>Title</h1>      
        <p>Some text here </p>
        <button>CTA</button>
   </div>
</div> 

CSS

<style>
.row img{
    width:300px;
    float:left;
    height:auto !important;
}
.container{
    text-align: center !important;
    width:100%;
}
.row{
    margin-top:0;
}
p{
    font-family:"Fjalla One", sans-serif !important;
    font-size: 20px;
}
h1{
font-family: 'Knewave', cursive;
font-size:40px;
color:black;
margin:0 !important;
padding: 0!important;
}
</style>

Answer 1

您应该使用 Bootstrap 类而不是您自己的 css。因为他们办过很多案子，css也很稳定。这是适合您的纯引导解决方案。

我用了另一张图片，你的图片会很合适。

注意:如果您遇到任何问题，请告诉我。

p{
    font-family:"Fjalla One", sans-serif !important;
    font-size: 20px;
}
h1{
  font-family: 'Knewave', cursive;  
  font-size:40px;
  color:black;
  margin:0 !important;
  padding: 0!important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row">        
        <div class="col-md-6 col-xs-6 text-right">
            <img src="https://code.google.com/images/developers.png" style="height: 80px;"/>
        </div>
        <div class="col-md-6 col-xs-6">
          <p>Some text heree</p>
          <h1>Title</h1>      
          <p>Some text here </p>
          <button>CTA</button>
        </div>
   </div>
</div>