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

Question

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

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

我尝试了几件事：首先将 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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Evo*_*ome 5

另一个解决方案是为您的 : 设置一些 CSS 属性"Test Test" div：在本例中，将此类添加div-centered到该 div 中。

一个工作示例:)

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

希望它有帮助:)

归档时间：	10 年，3 月前
查看次数：	9055 次
最近记录：	8 年，3 月前