Hi,
To move your image below the text:
The order of your HTML is important. Your web page will reflect how you have written your html. So if you have your image before your paragraph in html, thats how the page will look too.
So, just cut the whole image tag and paste it after the last closing </p>
tag in your html.
To center your image
First remove the styles from your img and give it the id of “dog” or anything you want.
<img src="https://cdn.thinglink.me/api/image/727110550026190849/1240/10/scaletowidth" class="img-responsive" alt="so doge, much cuteness,wow" id="dog" >
Now apply the following rules and your image will be centered and sized as you wish.
#dog{
width:100px;
height:100px;
margin: 0 auto;
}
the #
before dog tells the CSS that it’s looking for an ID within your HTML. The dog
bit is a unique identifier for that image, so these rules will only apply to that single pic. To apply a rule to multiple pics, you would use a class instead of ID
- EDIT: as @JacksonBates mentioned, classes are the correct way to go with CSS.
In which case you’de use class="img-responsive dog"
and your rule in CSS would have a dot instead of a hash/pound.
What the margin 0 auto rule is doing is saying, no margin on the top and bottom, and automatic left and right margins. The auto will result in equal margins on either side of the pic within its container. The container is the whole body in this case. You can change the 0 to a px value (10px or whatever) and that will give you a bit of margin on the top and bottom, which in most cases you will want a bit of separation between things.
It’s better practice, and more manageable, if you keep your styles out of html and inside the css section and a good habbit to get into.
Cheers
Mark