Question

我有两个必须使用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>

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

希望它有所帮助：）

Answer 2

添加样式=＆＃34;显示：内联块＆＃34;到第31行，到

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

Answer 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。希望它有所帮助！

修改

只需使用相关的bootstrap .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-**。

Answer 4

尝试删除<div class="row text-center">

中的“文字中心”

希望对你有帮助..

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

4 个答案: