As we all know, many of us tend to read posts with images in it. So in this tutorial we will learn how to add style in our post with the help of image alignments
What we will be discussing is . . .
- Inserting an Image at the center of our post
- Inserting an Image aligned at the left of our post
- Inserting an Image aligned at the right of our post
To successfully play with the positions of our images we will use some block of codes from the HTML
Center the image and have the source right at the bottom
We can center our image and text by using the <center> </center> tags. Remember when using HTML tags a start and closing tag is necessary. Closing tags were denoted by having the / sign.
We can insert our desired image to the center by following this line of code <center>IMAGE URL</center>
- The
IMAGE URLwould be the url of our image
When we insert images many of us usually get those images from the internet so basically we need to give our readers the sources of our images. To do that we should follow this code [Sources](URL)
- The
Sourceswould be the text displaying to our readers and theURLwould be the url of the page we want our readers to be redirected once clicked the displayed text
Sample Code:
<center>https://res.cloudinary.com/hpiynhbhq/image/upload/v1518598007/gtygzwfvd0rtuf5t7th7.png[Source](https://www.google.com.ph/search?q=steemit+upvote&rlz=1C1SQJL_enPH774PH774&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiM9IuqgqXZAhWLe7wKHVu3BDYQ_AUICigB&biw=1304&bih=677#imgrc=krZV01nOyxJUuM:)
Preview:
Align the image to the left and have the source right at the bottom (With Text Wrapping)
Some of us uses small images. With this some wants to insert text beside to these images to have more style. We can align our image and insert text beside to it by using this block of codes
<div class="pull-left"><center>"IMAGE URL"<a href="URL">source</a></center></div>
The text written right after the block of codes would be displaying right beside to the image
Sample Code:
<div class="pull-left"><center>https://res.cloudinary.com/hpiynhbhq/image/upload/v1518598929/aqgzemcocb510wyomhqo.png
<a href="https://www.google.com.ph/search?rlz=1C1SQJL_enPH774PH774&biw=1304&bih=677&tbm=isch&sa=1&ei=jbN5Wrq7A4XP0ASEtJi4Aw&q=decision&oq=decision&gs_l=psy-ab.3...291846.292919.0.293126.8.6.0.0.0.0.0.0..0.0....0...1c.1.64.psy-ab..8.0.0....0.XmRGUiZONw8#imgrc=sq-3G4b1DKmO6M:">source</a></center></div>
Decisions and Choices are things that must be think thoroughly before doing. It’s because our decisions matters to the rest of our lives even if it result in favor of us or not. Our decisions was affected by the people around us, by our parents, by our sister, by our brother, by our friends or even by the people that surrounds us. There are times that we do make some consultations to this persons, for advice and opinions that will help us a lot about the decision or choices we are going to make.
Preview:
Decisions and Choices are things that must be think thoroughly before doing. It’s because our decisions matters to the rest of our lives even if it result in favor of us or not. Our decisions was affected by the people around us, by our parents, by our sister, by our brother, by our friends or even by the people that surrounds us. There are times that we do make some consultations to this persons, for advice and opinions that will help us a lot about the decision or choices we are going to make.Align the image to the right and have the source right at the bottom (With Text Wrapping)
Some of us uses small images. With this some wants to insert text beside to these images to have more style. We can align our image and insert text beside to it by using this block of codes
<div class="pull-right"><center>"IMAGE URL"<a href="URL">source</a></center></div>
The text written right after the block of codes would be displaying right beside to the image
Sample Code:
<div class="pull-right"><center>https://res.cloudinary.com/hpiynhbhq/image/upload/v1518598929/aqgzemcocb510wyomhqo.png
<a href="https://www.google.com.ph/search?rlz=1C1SQJL_enPH774PH774&biw=1304&bih=677&tbm=isch&sa=1&ei=jbN5Wrq7A4XP0ASEtJi4Aw&q=decision&oq=decision&gs_l=psy-ab.3...291846.292919.0.293126.8.6.0.0.0.0.0.0..0.0....0...1c.1.64.psy-ab..8.0.0....0.XmRGUiZONw8#imgrc=sq-3G4b1DKmO6M:">source</a></center></div>
Decisions and Choices are things that must be think thoroughly before doing. It’s because our decisions matters to the rest of our lives even if it result in favor of us or not. Our decisions was affected by the people around us, by our parents, by our sister, by our brother, by our friends or even by the people that surrounds us. There are times that we do make some consultations to this persons, for advice and opinions that will help us a lot about the decision or choices we are going to make.
Preview:
Decisions and Choices are things that must be think thoroughly before doing. It’s because our decisions matters to the rest of our lives even if it result in favor of us or not. Our decisions was affected by the people around us, by our parents, by our sister, by our brother, by our friends or even by the people that surrounds us. There are times that we do make some consultations to this persons, for advice and opinions that will help us a lot about the decision or choices we are going to make.Thank you for dropping by and reading my simple tutorial on how to Align Images in our Posts. Thank you for your time and attention !
@steemitfamilyph Join us