logo标签列表

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

htmlcsstwitter-bootstrap
5
我有两个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>
4个回答
5
另一种解决方案是将一些CSS属性设置为您的 “Test Test” div： 在这种情况下，将此“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>

希望它有所帮助 :)
1
在第31行添加style="display:inline-block"，保留HTML，不要解释。
<div class="col-sm-3" style="display:inline-block">
谢谢，这是最接近帮助我的东西了。然而，它只在屏幕较小的时候有效。当我扩展屏幕和fiddle输出的宽度时，文本会再次全部向左移动。有没有什么方法可以解决这个问题？ - martin934
0

您可以通过在两侧设置相等的边距来使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-**。

谢谢，这个可以工作，但是当我扩展屏幕和小提琴时，图像仍然保持居中。它们只应在屏幕较小时（例如移动设备）居中。当屏幕扩展时，我希望它们水平排列。 - martin934
-1
尝试删除<div class="row text-center">中的"text-center"。

希望这可以帮到你。

更新：只需删除此处的text-center文本>> <div class="row text-center">，只保留<div class="row">即可。 - Marjonh Davin
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接