Bootstrap - 内容居中，然后左对齐（相对于中心）答案

【问题标题】：Bootstrap - Centering Content, Then Left Aligning (in relation to center)Bootstrap - 内容居中，然后左对齐（相对于中心）
【发布时间】：2016-05-17 14:56:37
【问题描述】：

我有两个必须使用 Bootstrap 类 text-center 居中的 div（出于移动原因）。应用该类后，图像和文本完美居中。但是，我希望文本居中并左对齐，以便与图像的左侧完全一致。

我尝试了几件事：首先将 div 居中，然后围绕文本创建一个 div，然后将文本与 text-left 左对齐。但是，文本不会保持居中，而是一直移动到列的左侧。我希望它只像图像一样左移。如果我使用像素设置边距，以便文本与图像左对齐，那么它不会保持响应并在调整大小时跳转到整个页面。

以下是内容居中的示例，以及当我将其居中然后左对齐文本时发生的情况的示例： https://jsfiddle.net/wgr165tL/3/

我想了解如何使文本居中但仅左对齐到图像的左侧。有必要保留text-center 类。任何投入将不胜感激。

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<h1>Example 1 (Original)</h1>
(want text to align with the left edge of the box)
<div class="row text-center">
  <div class="col-sm-1">
  </div>

  <div class="col-sm-3">
    <div><img src="http://ep.yimg.com/ca/I/brandsonsale-store_2271_940646575"></div>
    Test Test
  </div>
  <div class="col-sm-3">
    <div><img src="http://ep.yimg.com/ca/I/brandsonsale-store_2271_940646575"></div>
    Test Test
  </div>
</div>

<h1>Example 2</h1>
(Tried centering and then left-aligning text, but it goes too far left. Ideally it will line up with the left edge of the box)
<div class="row text-center">
  <div class="col-sm-1">
  </div>

<div class="col-sm-3">
    <div><img src="http://ep.yimg.com/ca/I/brandsonsale-store_2271_940646575"></div>
    <div class="text-left">Test Test</div>
  </div>
  <div class="col-sm-3">
    <div><img src="http://ep.yimg.com/ca/I/brandsonsale-store_2271_940646575"></div>
    <div class="text-left">Test Test</div>
  </div>
</div>
</body>
</html>

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

另一种解决方案是为您的"Test Test" div 设置一些 CSS 属性：在这种情况下，将此 div-centered 类添加到该 div。

一个工作示例:)

.div-centered {
  text-align: left; 
  margin: auto; 
  width: 200px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<h1>Example 2</h1>
You rock div-centered class!
<div class="row text-center">
  <div class="col-sm-1">
  </div>

<div class="col-sm-3">
    <div><img src="http://via.placeholder.com/200x100"></div>
    <div class="div-centered" >Test Test</div> 
</div>
  <div class="col-sm-3">
      <div><img src="http://via.placeholder.com/200x100"></div>
      <div class="div-centered">Test Test</div>
    </div>
  </div>

希望它有所帮助:)

【讨论】：

【解决方案2】：

将 style="display:inline-block" 添加到第 31 行，到

<div class="col-sm-3" style="display:inline-block">

【讨论】：

谢谢，这是最有帮助的东西。但是，这只适用于屏幕较小的情况。当我扩大屏幕和小提琴输出的宽度时，文本再次向左移动。有什么办法可以解决吗？

【解决方案3】：

您可以通过在两边赋予相等的边距来使 div 居中。像这样：

<div class="row">
  <div class="col-xs-offset-4 col-xs-4">
    <img class="img-responsive" src="http://ep.yimg.com/ca/I/brandsonsale-store_2271_940646575">
    Test Test
  </div>
  <div class="col-xs-offset-4 col-xs-4">
    <img class="img-responsive" src="http://ep.yimg.com/ca/I/brandsonsale-store_2271_940646575">
    Test Test
  </div>
</div>

请参阅更新的Fiddle。希望对您有所帮助！

编辑：

只需使用相关的引导程序.col-**-** 类。

<div class="row">
  <div class="col-xs-offset-4 col-xs-4 col-md-offset-0 col-md-4">
    <img class="img-responsive" src="http://ep.yimg.com/ca/I/brandsonsale-store_2271_940646575">
    Test Test
  </div>
  <div class="col-xs-offset-4 col-xs-4 col-md-offset-0 col-md-4">
    <img class="img-responsive" src="http://ep.yimg.com/ca/I/brandsonsale-store_2271_940646575">
    Test Test
  </div>
</div>

见Fiddle。

如果您希望它也内嵌在平板电脑中，请使用 .col-sm-**。

【讨论】：

谢谢，这项工作，但是当我扩大屏幕和小提琴时，图像保持居中。仅当屏幕较小时它们才应该居中（例如 - 对于移动设备）。当屏幕展开时，我希望它们水平排列。

【解决方案4】：

尝试删除<div class="row text-center">中的“文本中心”

希望对你有帮助..

【讨论】：

更新：只需在此处删除文本中心>>
仅保留
..