divの右側にテキストを配置

Question

私はテキストを中央に残したいと思います。divの右側に移動したいのですが。私のdivは画像の背景で覆われています。

私が変えてみました：へ

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

：

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

が、それは何の効果もありませんでした。ブートストラップの中でこれを行う方法はありますか？または自分のカスタム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

あなたは全例がここにある

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

あなたの左と右（列）場合は同じ幅である必要があり、このように例えばブートストラップのgrid system

を使用することができます：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> 

：

代わりに、このような何かを行うセンターを。彼らへ。

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を押します追加することですスクリーン。

 <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