將文本放在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演示

Answer 1

您可以使用引導程序的網格系統

例如這樣，如果您的左側和右側（列）的寬度應相同

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

如果不需要左列，則可以使用offset。 只需為此使用最新的引導程序版本，因為某些較舊的引導程序版本不支持所有列類型的偏移量。

<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：center; 給他們。

Answer 3

使用引導程序完成此操作的一種方法是添加一個單獨的div，該div的跨度可能僅為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>

柱塞示例

否則，一個簡單的解決方案是像這樣向div樣式添加margin-left屬性。

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

柱塞示例2

Answer 4

col-sm-12與其父控件的寬度相同，則無法浮動。 指定寬度（絕對值或百分比），它可以浮動。

像這樣： 新提琴

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

編織： 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>