Platzieren Sie den Text auf der rechten Seite des div

Question

Ich möchte, dass mein Text zentriert bleibt, ich möchte es auf die rechte Seite des div verschieben. Mein div ist mit einem Bildhintergrund bedeckt.

Ich habe versucht, zu ändern:

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

zu:

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

aber es hatte keine Wirkung. Gibt es eine Möglichkeit für mich, dies innerhalb von Bootstrap zu tun oder muss ich meine benutzerdefinierte CSS verwenden? Und wie kann das gemacht werden?

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

Sie können die Verwendung Bootstrap grid system

Zum Beispiel wie folgt aus, wenn die linke und rechte Seite (Spalte) sollten gleiche Breite

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

Voll Beispiel hier ist : https://jsfiddle.net/woeote07/3/

Wenn Sie keine linke Spalte benötigen, können Sie Offset verwenden. Verwenden Sie hierfür die neueste Bootstrap-Version, da einige ältere Versionen den Offset für alle Spaltentypen nicht unterstützen.

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

Beispiel hier: https://jsfiddle.net/woeote07/5/

Answer 2

Ihr Text wird jetzt zentriert. Wenn Sie wollen, dass es auf der rechten Seite der Seite sein soll, können Sie nicht die 'col-sm-12' machen, da diese die gesamte Zeile einnimmt.

Stattdessen etwas tun, wie folgt aus:

<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> 

Dann, wenn Sie es in den Spalten zentriert wollen, nur text-align zuweisen: center; zu ihnen.

Answer 3

col-sm-12 kann nicht schweben, wenn es die gleiche Breite wie seine Eltern hat. Geben Sie eine Breite (absolut oder prozentual) an, und sie kann schweben.

So: 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

Weave:http://kodeweave.sourceforge.net/editor/#0b6cf679309a05c75de936bc691576ca
Verästelter Fiddle:https://jsfiddle.net/woeote07/4/

Ich möchte, dass mein Text zentriert bleibt, ich möchte ihn auf die rechte Seite des div verschieben.

Zunächst einmal .col-sm-12 hat standardmäßig eine Breite von 100% (die gleiche Breite wie die Eltern). So können Sie es zu 50% ändern und dann können Sie float verwenden, um Ihren Text auf der rechten Seite zu haben.

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

Hier ist ein einfaches Schnipsel!

.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

Eine Möglichkeit, dies mit Bootstrap zu bewerkstelligen wäre ein separates div hinzufügen, die vielleicht nur eine Spanne von 2 hatte Dies würde im Wesentlichen Ihre aktuellen div auf die rechte Seite schieben von der Bildschirm.

 <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

Ansonsten eine einfache Lösung wäre, ein margin-left-Attribut auf den Stil des div wie so hinzuzufügen.

 <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