CODEWITHSUNDEEP
htmlcss
user8212730
user8212730

Reputation:

Align text under left side of image

I am trying to align both paragraphs under the left side of an image, but I can't seem to figure it out. I am also trying to make the width of the text the same width of the image. I need to keep the div align="center" in there so the bootstrap row is on the center of the page. Please help!

Here is an image from my web design on how i'm trying to align it. http://i.imgur.com/kIbyBUS.png

Here is the html code. https://jsfiddle.net/kvu7y8ym/

    <div align="center">
      <div id="preview" class="col-lg-4 col-md-6 col-sm-12">
        <img id="img" src="http://i.imgur.com/HHGHTsu.png">
        <p><b>EXAMPLE WEB DESIGN</b></p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Vestibulum lobortis diam ut ipsum egestas scelerisque. Nam semper lorem 
    at cursus pulvinar. Ut luct diam.</p>
      </div>
    </div>

Upvotes: 1

Views: 62

Answers (2)

simon
simon

Reputation: 1105

<div class="container">
   <div class="row">
      <div id="preview" class="col-lg-offset-4 col-md-offset-3 col-lg-4 col-md-6 col-sm-12">
        <img id="img" src="http://i.imgur.com/HHGHTsu.png">
        <p><b>EXAMPLE WEB DESIGN</b></p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Vestibulum lobortis diam ut ipsum egestas scelerisque. Nam semper lorem 
    at cursus pulvinar. Ut luct diam.</p>
     </div>
   </div>
</div>

I'd do it this way if you're using Bootstrap (which it seems like you are because you're using col-lg-4 etc.

When you use those classes they expect to be inside container and then inside a row use different offsets to center the content after that, see example above.

Upvotes: 0

Asons
Asons

Reputation: 87191

The simplest to accomplish that is to use 2 wrappers, an inline-block and a table-caption.

The table-caption will keep the text within the image's edges, and the inline-block will be centered with the text-align: center set on the #preview element.

#preview {
  text-align: center;
}

.inline-block {
  display: inline-block;
}

.tbl-caption {
  display: table-caption;
  text-align: left;
}
<div>
  <div id="preview" class="col-lg-4 col-md-6 col-sm-12">
    <div class="inline-block">
      <div class="tbl-caption">
        <img id="img" src="http://i.imgur.com/HHGHTsu.png">
        <p><b>EXAMPLE WEB DESIGN</b></p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lobortis diam ut ipsum egestas scelerisque. Nam semper lorem at cursus pulvinar. Ut luct diam.</p>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions