CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
martin934
martin934

Reputation: 91

Bootstrap - Centering Content, Then Left Aligning (in relation to center)

I have two divs that must be centered using the Bootstrap class text-center (for mobile reasons). After applying this class, the image and text center perfectly. However, I'd like the text to be centered AND left-aligned so that it is precisely in line with the left side of the image.

I've tried a couple of things: first centering the div and then creating a div around the text, and left-aligning the text with text-left. However, the text does not stay centered and moves all the way left of the column. I'd like it to only go as left as the image. If I set a margin with pixels so that the text is left-aligned with the image, then it does not stay responsive and jumps all over the page when it is resized.

Here is an example of the content centered, and an example of what happens when I center it and then left-align the text: https://jsfiddle.net/wgr165tL/3/

I'd like to find out how to get the text centered but left-aligned only as far as the left of the image. It is necessary to keep the text-center class. Any input would be greatly appreciated. 

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

Upvotes: 5

Views: 14289

Answers (4)

Evochrome
Evochrome

Reputation: 1215

Another solution is to set some CSS-properties to your "Test Test" div: In this case add this div-centered class to that div.

A working example :)

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

Hope it helped :)

Upvotes: 5

musafar006
musafar006

Reputation: 989

You can center the div's by giving equal margins on both sides. Like this:

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

See Updated Fiddle. Hope it helps!

Edit:

Just use relevant bootstrap .col-**-** classes.

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

See Fiddle.

Use .col-sm-** if you want it to appear inline in tablets too.

Upvotes: 0

Marjonh Davin
Marjonh Davin

Reputation: 9

try to delete the "text-center" in <div class="row text-center">

hope it help you..

Upvotes: -1

xfx
xfx

Reputation: 1948

Add style="display:inline-block" to line 31, to

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

Upvotes: 1

Related Questions