将文本放在 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

您的文字现在居中。如果您希望它位于页面的右侧，则不能执行 '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 2

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 3

编织: http://kodeweave.sourceforge.net/editor/#0b6cf679309a05c75de936bc691576ca
分叉 Fiddle: https://jsfiddle.net/woeote07/4/

I would like my text to remain centered by I would like to move it to the right side of the 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 4

您可以使用 bootstrap 的 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/

如果您不需要左栏，您可以使用偏移。只需为此使用最新的 bootstrap 版本，因为一些较旧的版本不支持所有列类型的偏移量。

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

此处示例：https://jsfiddle.net/woeote07/5/

Answer 5

使用 bootstrap 实现此目的的一种方法是添加一个单独的 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>

Plunker Example

否则，一个简单的解决方案是像这样向 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>

Plunker Example 2

将文本放在 div 的右侧

Place text on the right side of the div

html

css

css-float

twitter-bootstrap