Bootstrap - 内容居中，然后左对齐（相对于中心）
Posted
技术标签:
【中文标题】Bootstrap - 内容居中，然后左对齐（相对于中心）【英文标题】：Bootstrap - Centering Content, Then Left Aligning (in relation to center) 【发布时间】：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>
【问题讨论】：
【参考方案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">中的“文本中心”
希望对你有帮助..
【讨论】：
更新：只需在此处删除文本中心>> 仅保留 ..以上是关于Bootstrap - 内容居中，然后左对齐（相对于中心）的主要内容，如果未能解决你的问题，请参考以下文章