Menu
I'm quite new to HTML and I wanted to have an image in my page, but when I use <hr> to separate it from other stuff they cross each other. So I want to move my image up a little. Here's the code I've been using:
<html dir="rtl"> <body> ... <img src="20161125_041749.jpg" alt="my pic" style= "width: 108px; height: 130px; float:left;" ... </div> </body> </html>
I'm not using <head> nor <style> tags.
I've been trying to use position:relative;top:-10px; ,but I can't figure out how to use it or it has some problem with the "float".
Coud anyone please help me what to do?
Thanks in advance and Thanks to all who have tried to solve it so far...
722
Method 1: Using the Position Property To center an image vertically, you can wrap it in a block element like a div and use a combination of the CSS position property, the left and top properties, and the transform property.
You can easily move images in HTML using <marquee> tag. It is used to create scrolling images either from horizontally left to right or right to left, or vertically top to bottom or bottom to top. By default, image found within the <marquee> tag will scroll from right to left.
Try using float: right; and a new div for the top so that the image will stay on top.
HTML | <img> align Attribute The <img> align attribute is used to set the alignment of an image. It is an inline element. It is used to specify the alignment of the image according to surrounding elements.
Approach: Create a div tag to place the images. In the <img> tag, provide the path of the images using the src attribute and an alternative text using the alt attribute. Add CSS properties to display the images in a vertical alignment.
The position Property Setting position: absolute on an element lets you use the CSS properties top , bottom , left , and right to move the element around the page to exactly where you want it. For example, setting top: 1em move the element so its top is 1em from the top of the page.
change the value of top as you needed
#img{
position: relative;
top:-10px;
}<img src="https://i.stack.imgur.com/W1bSf.jpg" alt="my pic" style= "width: 108px; height: 130px; float:left;" id="img">This root issue (that the image and <hr> cross each other) sounds like a clearfix problem.
When you have a floating element, it may appear to "overlap" non-floating elements:
#float {
width: 100px;
height: 100px;
background: red;
float: right;
}
hr {
border: 4px solid blue;
}<div id="float"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id auctor tellus. In hac habitasse platea dictumst</p>
<hr>But instead of trying to just move the float up, you might want to add clear: both to your <hr>:
#float {
width: 100px;
height: 100px;
background: red;
float: right;
}
hr {
border: 4px solid blue;
clear: both;
}<div id="float"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id auctor tellus. In hac habitasse platea dictumst</p>
<hr>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
