在div的右側放置文本

Question

我希望我的文本保持居中，我想將它移動到div的右側。我的div覆蓋了圖像背景。

我試圖改變：

<div class="col-sm-12"> 

到：

<div class="col-sm-12" style="float:right;"> 

，但沒有任何效果。有沒有辦法讓我在bootstrap中做到這一點，或者我必須使用我的自定義CSS？這怎麼能做到呢？

HTML：

<div id="box" class="vcenter"> 
    <div class="container"> 
    <div class="row center"> 
     <div class="col-md-12"> 
     <div class="row"> 
      <div class="col-sm-12"> 
      <p>Text text text text text text text text text ext text text text text text text text/p> 
       <p>Text text text text text text text text text ext text text text text text text text/p> 
       <p>Text text text text text text text text text ext text text text text text text text/p> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

CSS：

.vcenter { 
    display: flex; 
    align-items: center; 
} 

#box { 
    background: url("url here") no-repeat center; 
    height: 500px; 
} 

.center { 
    text-align: center; 
} 

JSFiddle Demo

Answer 1

您可以使用自舉的grid system

例如，如果你的左邊和右邊（列）這應該是相同的寬度

<div class="col-xs-6"> 
    <p>Something left</p> 
</div> 
<div class="col-xs-6 center"> 
    <p>Something right</p> 
</div> 

完整的例子就是在這裏：https://jsfiddle.net/woeote07/3/

如果你不需要左列，你可以使用偏移量。只需使用最新的引導版本，因爲一些較舊的版本不支持所有列類型的偏移量。

<div class="col-xs-6 col-xs-offset-6 center"> 

這裏舉例：https://jsfiddle.net/woeote07/5/

Answer 2

你的文本居中現在。如果您希望它位於頁面的右側，則無法執行'col-sm-12'，因爲它會佔用整行。

相反，做這樣的事情：

<div class="col-sm-6"><p>the left side</p></div> 
<div class="col-sm-6"><p>Text text text text text text text text</p></div> 

然後，如果你希望它爲中心的欄目裏面，只是分配的text-align：中心;給他們。

Answer 3

col-sm-12如果它具有與其父項相同的寬度，則不能浮動。指定寬度（絕對或百分比），並且可以浮動。

像這樣：new Fiddle

.vcenter { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
#box { 
 
    background: url("http://2.bp.blogspot.com/-WEArLbKazLg/Ujg2PL6NG7I/AAAAAAAABSo/UZE_Z-UwPVQ/s1600/Simple-white-light-web-vector-design-image-wallpaper.jpg") no-repeat center; 
 
    height: 500px; 
 
} 
 

 
.center { 
 
    text-align: center; 
 
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<div id="box" class="vcenter"> 
 
    <div class="container"> 
 
    <div class="row center"> 
 
     <div class="col-md-12"> 
 
     <div class="row"> 
 
      <div class="col-sm-12" style="float:right; width:50%"> 
 
      <p>Text text text text text text text text text ext text text text text text text text</p> 
 
      <p>Text text text text text text text text text ext text text text text text text text</p> 
 
      <p>Text text text text text text text text text ext text text text text text text text</p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 4

編織：http://kodeweave.sourceforge.net/editor/#0b6cf679309a05c75de936bc691576ca
歧路小提琴：https://jsfiddle.net/woeote07/4/

我希望我的文本保持居中，我想將它移動到div的右側。

首先，.col-sm-12的默認寬度爲100％（與其父母寬度相同）。因此，您可以將其更改爲50％，然後您可以使用float將文字放在右側。

.col-sm-12 { 
    float: right; 
    width: 50%; 
} 

這是一個簡單的片段！

.vcenter { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
#box { 
 
    background: url("http://2.bp.blogspot.com/-WEArLbKazLg/Ujg2PL6NG7I/AAAAAAAABSo/UZE_Z-UwPVQ/s1600/Simple-white-light-web-vector-design-image-wallpaper.jpg") no-repeat center; 
 
    height: 500px; 
 
} 
 

 
.center { 
 
    text-align: center; 
 
} 
 

 
.col-sm-12 { 
 
    float: right; 
 
    width: 50%; 
 
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 

 
<div id="box" class="vcenter"> 
 
    <div class="container"> 
 
    <div class="row center"> 
 
     <div class="col-md-12"> 
 
     <div class="row"> 
 
      <div class="col-sm-12"> 
 
      <p>Text text text text text text text text text ext text text text text text text text</p> 
 
      <p>Text text text text text text text text text ext text text text text text text text</p> 
 
      <p>Text text text text text text text text text ext text text text text text text text</p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 5

一種方式來做到這一點與引導將添加一個單獨的股利，也許只有2。這是一個跨度將基本上你目前的div推到右側屏幕。

 <div class="row"> 
     <div class="col-sm-2"> 
      <p>First Text Area</p> 
      <p>First Text Area</p> 
      <p>First Text Area</p> 
     </div> 
     <div class="col-sm-10"> 
      <p>Text text text text text text text text text ext text text text text text text text</p> 
      <p>Text text text text text text text text text ext text text text text text text text</p> 
      <p>Text text text text text text text text text ext text text text text text text text</p> 
     </div> 
     </div> 

Plunker Example

否則簡單的解決方案將是一個保證金左屬性添加到像這樣的div風格。

 <div class="col-sm-12" style="margin-left: 60px;"> 
      <p>Text text text text text text text text text ext text text text text text text text</p> 
      <p>Text text text text text text text text text ext text text text text text text text</p> 
      <p>Text text text text text text text text text ext text text text text text text text</p> 
     </div> 

Plunker Example 2