Question

我如何使图像在文本和按钮旁边居中？该图像位于左侧，因为我放置了 float：left ，但是如果我不放置它，则该图像居中，但文本位于其下方。使用引导程序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>

Answer 2

 <div class="container">
    <div class="row">        
        <div class="col-md-4 col-xs-12">
            <img src="images/hand.jpg"class="img-responsive"/>
        </div>
         <div class="col-md-8 col-xs-12 right-content">  
           <p>Some text heree</p>
           <h1>Title</h1>      
           <p>Some text here </p>
           <button>CTA</button>
         </div>
   </div>
</div> 
you should wrap your content to other div like col-md-8 or any class you want to.
There is two option for you
<style>
.left-content{
  padding-left:300px;
}
</style>

另一个选择是，引导程序col自动自动分成两列，即并排

Answer 3

要使图像位于文本之间，您可以将div放在else { pthread_cond_broadcast标记之间，也可以将其放在任何需要的地方，然后删除<p>属性，这里是一个示例：

float:left

.row img{
    width:300px;
    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;
}

一个更好的选择是将您的内容的其他信息包装在wrap text
上

Answer 4

您只需要使用display:flex;属性即可：-

.two-img{ display:flex;  justify-content: center;}

<div class="two-img">
<img src="images/hand.jpg"class="img-responsive"/>
<img src="images/hand.jpg"class="img-responsive"/>
</div>

Answer 5

不太确定我是否正确理解您想要实现的目标。如果您只想将图像放在标题所在的位置，请将html修改为：

filtered_blurred_x = cv2.filter2D(gray_blur, cv2.CV_32F, sobel_x)  
filtered_blurred_y = cv2.filter2D(gray_blur, cv2.CV_32F, sobel_y)

如果这不是您要尝试的操作，请提供更多有关您希望图像位于何处的信息。

Answer 6

    .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;
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
     <div class="container">
        <div class="row">        
            <div class="col-xs-6 col-sm-6 ">
                <img src="images/hand.jpg"class="img-responsive"/>
            </div>
            <div class="col-xs-6 col-sm-6">
               <p>Some text heree</p>
              <h1>Title</h1>      
              <p>Some text here </p>
              <button>CTA</button>
            </div>
       </div>
    </div>

这对您有用... Bootstrap已经具有列类。通过应用它们可以解决问题。

使用引导程序将文本和图像左右对齐

6 个答案: