Menu
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>
363
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 :)
187
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
