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