使用引導程序將文本和圖像左右對齊

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>

另一種選擇是，bootstrap col自動自動分成兩列，即並排

Answer 3

要使圖像位於文本之間，您可以將div放在<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; } 

 <div class="container"> <div class="row"> <p>Some text heree</p> <h1>Title</h1> <div class="col-md-4 col-xs-12"> <img src="https://www.dike.lib.ia.us/images/sample-1.jpg"class="img-responsive"/> </div> <p>Some text here </p> <button>CTA</button> </div> </div> 

更好的選擇是將您的內容其他信息包裝在自動換行文本上

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修改為：

 <div class="container">
    <div class="row">        
        <p>Some text heree</p>
       <img src="images/hand.jpg"class="img-responsive"/>      
        <p>Some text here </p>
        <button>CTA</button>
   </div>
</div> 

如果這不是您要嘗試的操作，請提供更多有關您希望圖像位於何處的信息。

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已經具有列類。通過應用它們可以解決問題。