引導文本和圖像在中間

所以我想文本和圖像是在頁面的中心。右邊是文本右對齊，左邊是圖像我試過用divs，然後用table沒有成功。

我已經試過：

<img src="your-image/path-here.jpg" class="img-responsive center-block" />

我的代碼：

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <img style='float:left;width:200px;height:200px; margin-right:10px;' src="img/bootstrap.jpg" /> 
      <p>Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p> 
     </div> 
    </div>

編輯文本應該在圖像的中間對齊，並且都應該在中心。

來源

2017-02-23 Vanko

@ZimSystem爲什麼你認爲被複制？ – Vanko

TRY THIS--

使用class="img-responsive pull-right "圖像對齊和class="text-left"文本對齊。

@media only screen and (min-width : 320px) { 
 

 
} 
 

 
/* Extra Small Devices, Phones */ 
 
@media only screen and (min-width : 480px) { 
 
#text-left { 
 
padding-top: 15%; 
 

 
} 
 
} 
 

 
/* Small Devices, Tablets */ 
 
@media only screen and (min-width : 768px) { 
 
#text-left { 
 
padding-top: 25%; 
 

 
} 
 

 
} 
 

 
/* Medium Devices, Desktops */ 
 
@media only screen and (min-width : 992px) { 
 
#text-left { 
 
padding-top: 30%; 
 

 
} 
 

 
} 
 

 
/* Large Devices, Wide Screens */ 
 
@media only screen and (min-width : 1200px) { 
 
#text-left { 
 
padding-top: 35%; 
 

 
} 
 

 
}

<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
      <style type="text/css"> 
 
      
 
      </style> 
 
      </head> 
 
      <body> 
 
      <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-12"> 
 
      <img class="img-responsive pull-right " style="width:200px;height:200px;" src="https://cdn.pixabay.com/photo/2016/02/19/15/46/dog-1210559_960_720.jpg" /> 
 
      <p id="text-left" class="text-left">Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p> 
 
     </div> 
 
    </div> 
 
    </body> 
 
    </html>

來源

2017-02-23 14:32:15 neophyte

文字不在圖片的中間 – Vanko

使用一些css使它在中間..檢查更新片段 – neophyte

在整頁不工作 – Vanko

您是否嘗試過使用引導程序的網格系統？像這樣的東西可能是你的解決方案：

<div class="container"> 
    <div class="row"> 
     <div class="col-md-6"> 
      <p>Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p> 
     </div> 
     <div class="col-md-6"> 
      <img style='width:200px;height:200px; margin-right:10px;' src="img/bootstrap.jpg" /> 
     </div> 
    </div> 
</div>

來源

2017-02-23 14:31:28 rakwaht

試試這個

<div class="container"> 
<div class="row"> 
    <div class="col-md-6 text-right"> 
     <p>Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p> 
    </div> 
    <div class="col-md-6 text-left"> 
<img style='width:200px;height:200px;' src="img/bootstrap.jpg" /> 
    </div> 
</div> 
</div>

來源

2017-02-23 14:32:13

引導文本和圖像在中間

回答

相關問題