引导 - 使内容居中，然后左对齐(相对于居中) - Bootstrap - Centering Content, Then Left Aligning (in relation to center) 小贝子编程网

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

另一种解决方案是为您的"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>

希望它对:)有所帮助

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

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

您可以通过在

两侧提供相等的边距来居中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>

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

编辑：

只需使用相关的引导.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>

见小提琴。

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

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

希望对您有所帮助..

引导 - 使内容居中，然后左对齐(相对于居中)

相关内容

最新更新

热门标签：