Menu
Currently I have a paragraph heading and an image to its right, on the same line:
<div class="paragraphs"> <div class="row"> <div class="span4"> <div class="content-heading"><h3>Experience   </h3><img src="../site/img/success32.png"/></div> <p>Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p> </div> </div> </div> This works fine - the content-heading and the image are on the same line. However, when I put the image before the content-heading div, they are no longer on the same line. This is what I want to achieve - image then content-heading - on the same line.
438
Using the float property of CSS will allow you to place an image and text on the same line without breaking the line break. Or Alternatively, you should use the flexbox method of CSS that uses the flex property to make sure that images and lines are aligned in the same line.
To center an image using text-align: center; you must place the <img> inside of a block-level element such as a div . Since the text-align property only applies to block-level elements, you place text-align: center; on the wrapping block-level element to achieve a horizontally centered <img> .
Using Text-align property Another way to align image to the left, centre or right of the page is to use the text-align property. The html code uses the <div> tag and inline CSS style. The following are examples of how to align an image to the left, centre and right. Image will follow the left alignment of text block.
Using Twitter Bootstrap classes may be the best choice :
pull-left makes an element floating leftclearfix allows the element to contain floating elements (if not already set via another class)<div class="paragraphs"> <div class="row"> <div class="span4"> <div class="clearfix content-heading"> <img class="pull-left" src="../site/img/success32.png"/> <h3>Experience   </h3> </div> <p>Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p> </div> </div> </div> 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
