<img ...>
<p>..</p>
Without setting align="left" on img,p will start from a blank line.
<img ... align="left">
<p>..</p>
But after setting align="left",p will come up around img,why?
I guess that <img> align attribut will work like CSS float property. It makes your image float. If you want <p> to stay under <img> so you should do it like this.
<img ... align="left" />
<div style="clear: both;"></div>
<p>..</p>
Float image to left or right using CSS
HTML uses the align attribute:
<img src="image.jpg" align="right">
XHTML uses an inline style:
<img src="image.jpg" style="float: right" />
The proof:
HTML img align Attribute
The align attribute of <img> is
deprecated, and is not supported in
HTML 4.01 Strict / XHTML 1.0 Strict
DTD.
Use CSS instead.
CSS syntax: <img style="float:right"
/>
Setting align html attribute to left or right on an image is equivalent to css floating the image.
Read about inline and block elements. I don't remember any good site (in English) with explanation of difference between these two types right now, so try to Google it.
Setting align="left" (this should be converted to its equivalent in CSS: float: left) makes img element floating. Once again read about floats.
Perhaps it's better to try :
<p><img align="left" /></p>
Or may be :
<img align="left" />
<p style="clear:left"></p>
Related
I need to move my image a bit to the right, but not fully.
This is what I currently have,
and this is how I need it to look like.
This is the code I have for the image currently:
<div>
<img src="../Hozier.png" width="245" height="600">
</div>
I am very new to HTML and really need some help. Thank you in advance.
You can add margin to the left side of the img element with CSS.
<div style="margin-left: 100px;"><img src="../Hozier.png" width="245" height="600"></div>
You can change the 100px value to move the image to the right more or less as needed.
You can do the following:
<div>
<img src="../Hozier.png" width="245" height="600" style="margin-left:100px;">
</div>
Or use positioning and other methods.
But the following code seems to be useless:
you can use position to move it style:"position: relative; left: 10px"
I am trying to align my profile picture in the middle of my webpage yet cannot seem to get it working. I have attempted both align="middle" & float methods yet it still refuses to leave the left hand side.
The code I have attempted to use (HTML5) is
<header>
<h1> Luke Johnson Portfolio</h1>
<div class="image-cropper" style="text-align">
<img src="lukeprofile.jpg" align="center" alt="Luke Profile Pic" class="rounded" />
</div>
</header>
Any help would be appreciated, thank you.
align attribute for the image is aligning it relativelly to the text or other images on webpage (for more info: https://www.w3schools.com/tags/att_img_align.asp).
And notice (info from w3schools):
"The align attribute of is not supported in HTML5. Use CSS instead."
So align attribute will not do the trick in your case, you can center image using:
img {
display: block;
margin: 0 auto;
}
instead. Here is an example:
img {
display: block;
margin: 0 auto;
}
<header>
<h1> Luke Johnson Portfolio</h1>
<div class="image-cropper" style="text-align">
<img src="https://pbs.twimg.com/profile_images/378800000017423279/1a6d6f295da9f97bb576ff486ed81389_400x400.png" alt="Luke Profile Pic" class="rounded" />
</div>
</header>
You Have misused the inline style tag, proper use would be as follows:
<div class="image-cropper" style="text-align: center">
<img src="lukeprofile.jpg" alt="Luke Profile Pic" class="rounded" />
</div>
I could help you more if I had the URL to the website.
Compatibility Notes
The align attribute of img tag is not supported in HTML5. Use CSS instead.
For the image to align middle, top, or bottom use the CSS property.
Here is an HTML code to reproduce the problem:
<!DOCTYPE html>
<html>
<body>
<div style="width:800px; margin:0 auto;">
<img src="logo.gif" width="100" height="40" />
</div>
</body>
</html>
When it is rendered in a desktop browser, the height of the only <div> becomes 45 pixels but not 40 as I expect (tested this in IE11 and Opera Next v20). logo.gif is 100x40, and the situation remains the same even if I apply zero border through CSS to the <img> tag (border, border-width, etc).
Why does it happen and how to fix it?
I believe it is not a bug as it is rendered the same way in all major browsers. The problem is fixed if we set just the display:block style. Without this, the image is rendered as an inline element, and its bottom border is aligned to the so called text baseline.
Let's change our code to demonstrate this:
<!DOCTYPE html>
<html>
<body style="background-color: #FFFF99;">
<div style="width:800px; margin:0 auto; background-color: #00CCFF;">
<img src="logo.gif" width="100" height="40" style="border: 3px solid black;" />
Some text yyy qqq
</div>
</body>
</html>
The result is the following:
As you can see, the extra space is needed to render the text without clipping!
I found a confirmation of that in the well-known book by Eric Meyer CSS: The Definitive Guide - in the section dedicated to alignment, when it describes the {vertical-align: baseline} attribute for the <img> tag. Here is the corresponding excerpt:
This alignment rule is important because it causes some web browsers always to put a replaced element's bottom edge on the baseline, even if there is no other text in the line. For example, let's say you have an image in a table cell all by itself. The image may actually be on a baseline, but in some browsers, the space below the baseline causes a gap to appear beneath the image. Other browsers will "shrink-wrap" the image with the table cell and no gap will appear. The gap behavior is correct, according to the CSS Working Group, despite its lack of appeal to most authors.
Same issue in FireFox and IE and Chrome.
You can fix this with a hack and add a Height:40px; to your div (I had to use an image to with the same width/height as your logo so don't be surprised that I have a different picture)
<div style="width:800px; margin:0 auto;border:solid;height:40px;">
<img src="http://a2.mzstatic.com/us/r30/Video/16/96/5f/mzi.rxlappss.100x100-75.jpg" width="100" height="40" />
</div>
Or, add some CSS to your image tag and keep the original code as is (will affect all images which may not be desirable)
img {padding:none;margin:none;display:block;}
http://jsfiddle.net/h6wrA/
Or, you can do this for only certain images with http://jsfiddle.net/h6wrA/2/
The only way I found to fix this problem correctly without height hacks, etc. is to set the container to line-height:0; (see demo example below).
.image { background:red; }
.image-fix { line-height:0; }
Image without Fix:
<div class="image">
<img src="http://via.placeholder.com/100x100" alt="">
</div>
<br>
Image with Fix:
<div class="image image-fix">
<img src="http://via.placeholder.com/100x100" alt="">
</div>
This is not a issue , you just need to write a correct CSS. Try
height:40px;display:block; for div tag and keep margin:0,padding:0
Thats all...
I have two images that I'm trying to center align horizontally. Currently they look like this...
But, I would like the "APPLY NOW" button to be horizontally aligned like so...
My current code for the two images is this...
<img class="alignright" src="image1.png" alt="" />
<img src="image2.png" align="right">
I've attempted to center align them without CSS, and I'd prefer not to use CSS if there is a way I can do it without it. If I have to use CSS, then I'd appreciate any help that is provided!
Thanks!
With CSS just use the vertical-align property with the value middle
More about vertical-align: http://www.w3schools.com/cssref/pr_pos_vertical-align.asp
Without css... I've no idea.
add the following css to the parent box or element which the images are in:
style="display:table-cell; vertical-align:middle;"
hth
Just apply two rules to the second image .
<img class="alignright" src="image1.png" alt="" />
<img class="center" src="image2.png" align="right">
css code:
.center{
positon:relative;
top:50%;
bottom:50%;
}
I have an icon image and text like the following. The code source of everything is:
<img src="...." align="absmiddle" /> My Title Here
The problem is that the icon is not aligned vertically with the title in Chrome compared to firefox.
I think the absmiddle doesn't work at all! Is there any solution? I don't want to use a table with 2 columns to fix this issue.
Try this solution:
<img src="img.png" style="margin-bottom:.25em; vertical-align:middle;">
vertical-align: middle; may be what you're looking for. I wouldn't necessarily assume WebKit knows from "absmiddle".
The align attribute of has been deprecated and is not supported in HTML 4.01 Strict or XHTML 1.0 Strict.
You should use CSS to achieve this effect. You could try the following code:
<img src="...." align="absmiddle" style="vertical-align:middle;" /> My Title Here
or
<img src="...." align="absmiddle" style="vertical-align:50%;" /> My Title Here
For me, vertical-align:middle; alone was not enough (on IE at least and with a textbox beside).
What works very well is along with border-style: none;:
<img src="...." style="vertical-align:middle; border-style: none;" />