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.
Related
I have an image which I want to align with the edge of text below. The text below is centered, but I can't figure out how keep it aligned on the left.
The code I have is:
<img src="Logo.png" style="margin: auto"/>
<h1 style="text-align: center;>The Collaborative Observer</h1>
<p style="text-align: center; font-size: 100%; padding-left: 6cm">The best thing that has happened to ICE since ICE.</p>
I also use the padding feature to align the bottom text, and I am wondering if there is a better way to do that.
The code above is modified for color, but looks like this.
just simply insert <center><img src="Logo.png" style="margin: auto"/></center>
when img & text in one div box, must set the 'vertical-align:text-bottom',so that the text under the image. sorry my English
<style>
.logo-box{display: table; text-align: center;}
.logo-box img{height: 100px; width: 100px; vertical-align:text-bottom}
</style>
<div class="logo-box">
<img src="Logo.png" />
<h3>The Collaborative Observer</h3>
</div>
<p style="text-align: center; font-size: 100%; padding-left: 6cm">The best thing that has happened to ICE since ICE.</p>
Seems like a good use of <figure> and <figcaption>.
From HTML5 Doctor:
The figure element represents some flow content, optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the document.
The figure element can be used to annotate illustrations, diagrams, photos, code listings, etc., that are referenced in the main content of the document, but that could, without affecting the flow of the document, be moved away from that primary content — e.g., to the side of the page, to dedicated pages, or to an appendix.
So why not...
<figure>
<img src="Logo.png" style="margin: auto"/>
<figcaption>
<h1>The Collaborative Observer</h1>
<p>The best thing that has happened to ICE since ICE.</p>
</figcaption>
</figure>
<figure> and <figcaption> are both block-level elements, so they will take up the full width of their container unless otherwise specified. This will allow the caption below to stretch to the edge of the element on each side, and then image will then be lined up correctly. Then add the following to your CSS file...
figure img {
margin: auto;
}
figcaption {
text-align: center;
}
figcaption p {
font-size: 100%;
padding-left: 6cm;
}
I think this is what you wanted :
<div style="text-align: center;">
<div style="left:10%;display:inline;margin:0 auto;">
<img src="http://almadaenmisr.com/templates/logo/1410252800_1266901625.jpg" width="100px" style="" />
</div>
<h1 style="display:inline;">The Collaborative Observer</h1>
<br />
<p style="text-align: center; font-size: 100%;padding-left: 15%;display:inline;">The best thing that has happened to ICE since ICE.</p>
</div>
Float the image left & inline the text.
Though this is working code, I would like to suggest using frameworks like bootstrap/skeleton for design so that its easier to work with and also makes it readily usable with all screen sizes.
<body>
<div id="banner">
<img id="img1" src="leftimage.gif" alt="" width="" id="headImg" />
<p id="myText">First Line of Text here
<br />
Second Line of Text here
</p>
<img id="img2" src="rightimage.gif" alt="" width="" id="headImg2" />
</div>
. . . more stuff down here
In CSS I have float: left for img1. On img2 I have float: right; and clear left;
I've been playing with this for hours with no success. What I'd like to do using CSS is center vertically the text between these two images. I'd also like to place it up against the left image, maybe a few pixels off.
Additionally I want to be able to set the font-size and other attributes (bold, color, etc.) of each of the two lines of text.
Can someone please put me on the right track? Nearly everything I try puts the text under the banner div completely. What am I missing?
Thanks.
If you put the p tag after the images, it will float up between the images and you can position it accordingly. You don't need clear:left on the right image and keep in mind that you can only have one id attribute on an element, not two. The images have two ids in your code, so I removed one.
<div id="banner">
<img id="img1" src="leftimage.gif" alt=""/>
<img id="img2" src="rightimage.gif" alt="" />
<p id="myText">First Line of Text here
<br />
Second Line of Text here
</p>
</div>
#img1{
float:left;
}
#img2{
float:right;
}
You can see this working here: http://jsfiddle.net/duq6R/
First off, you will need to remove the floats on the images and paragraph.
Second, you need to make both images and paragraphs display:inline-block;. Now, you can use vertical-align: middle; to achieve your desired effect.
#banner {
overflow: hidden; /*this is a cheap clearfix*/
text-align: center;
}
#banner img, p {
display: inline-block;
vertical-align: middle;
}
See this JS Fiddle.
I want the text and the image to be next to each other but I want the image to be on the far left of the screen and I want the text to be on the far right of the screen. This is what I currently have....
<body>
<img src="website_art.png" height= "75" width= "235"/>
<h3><font face="Verdana">The Art of Gaming</font></h3>
</body>
How can I do this?
Thanks
img {
float:left;
}
h3 {
float:right;
}
jsFiddle example
Note that you will probably want to use the style clear:both on whatever elements comes after the code you provided so that it doesn't slide up directly beneath the floated elements.
You want to use css float for this, you can put it directly in your code.
<body>
<img src="website_art.png" height= "75" width="235" style="float:left;"/>
<h3 style="float:right;">The Art of Gaming</h3>
</body>
But I would really suggest learning the basics of css and splitting all your styling out to a separate style sheet, and use classes. It will help you in the future. A good place to start is w3schools or, perhaps later down the path, Mozzila Dev. Network (MDN).
HTML:
<body>
<img src="website_art.png" class="myImage"/>
<h3 class="heading">The Art of Gaming</h3>
</body>
CSS:
.myImage {
float: left;
height: 75px;
width: 235px;
font-family: Veranda;
}
.heading {
float:right;
}
You can use vertical-align and floating.
In most cases you want to vertical-align: middle, the image.
Here is a test: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_vertical-align
vertical-align: baseline|length|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;
For middle, the definition is: The element is placed in the middle of the parent element.
So you might want to apply that to all elements within the element.
I am having a little issue with a few headers being misplaced on the site I am working on and also an image that's supposed to show below each one of them is not showing.
You can see what I am talking about here:
Here's my HTML:
<!-- main-content -->
<div id="main-content">
<h1> Check out all our DEADicated sites: </h1>
<div class="sites">
<a href="http://www.thedeadicated.tumblr.com" target="_blank">
<img src="images/sites/tumblr.jpg" width="215" height="150" alt="Tumblr"/></a>
<p> Tumblr </p>
</div>
<div class="sites">
<a href="http://www.twitter.com/thedeadicated" target="_blank">
<img src="images/sites/twitter.jpg" width="215" height="150" alt="Twitter"/></a>
<p> Twitter </p>
</div>
<div class="sites">
<a href="http://www.youtube.com/user/DeadicatedRepository" target="_blank">
<img src="images/sites/youtube.jpg" width="215" height="150" alt="YouTube"/></a>
<p> YouTube </p>
</div>
<h2> To join TheDEADicated, click HERE! </h2>
<h2> To get your own DEADicated wristband, click HERE! </h2>
<h2> Can't get enough of Dead Sara?! Dead Sara Addiction Treatment Facility </h2>
<h2> Email us at: TheDEADicated#TheDEADicated.org </h2>
</div> <!-- close main-content -->
And this is the CSS code for the main-content & headers:
#main-content{
padding: 50px 50px 30px 50px;
background: #fff url('images/shadow.png') repeat-x;
min-height: 800px;
}
#main-content h2{
margin-top: 30px;
padding-bottom: 8px;
background: url('images/ink-line.png') no-repeat left bottom;
clear: both;
}
Any kind of help would be greatly appreciated. Thanks!
I can't tell exactly what is happening here, but taking a guess at how the elements above the headers look, I'd say you have a float issue. Try removing the "clear: both" from the h2 and add "float: left; width: 100%;" in its place.
The comments are correct that you're not really clear about what you should see but don't, but if I interpret you correctly you mean that "my headings aren't showing the margin and padding or background images that I expect".
I'm going to take another leap of faith to offer up a possible solution. I see
</div> <!-- close main-content -->
at the end of your html but I don't see a <div id="main-content> anywhere. It should either be at the top of the page, or before the block of h2s, depending on what you desire the outcome to be. Try adding <div id="main-content> before the first h2 tag and see if that solves it for you.
Edit: I see your problem more clearly now, but this is tricky to resolve without the live url to inspect. It could be a float issue, but the clear should resolve that, unless it's being overridden, so you could change to:
clear: both !important;
It could be a display problem, so try adding:
h2 { display: block !important; }
If there's a live url that would certainly help. Final thought is to make sure every tag in the entire page html is properly opened and closed. Redundant or unclosed divs can cause issues like this in my experience.
How can I right-align an image using CSS.
I do not want the text to wrap-around the image. I want the right aligned image to be on a line by itself.
<img style="float: right;" alt="" src="http://example.com/image.png" />
<div style="clear: right">
...text...
</div>
jsFiddle.
img {
display: block;
margin-left: auto;
}
Float the image right, which will at first cause your text to wrap around it.
Then whatever the very next element is, set it to { clear: right; } and everything will stop wrapping around the image.
There are a few different ways to do this but following is a quick sample of one way.
<img src="yourimage.jpg" style="float:right" /><div style="clear:both">Your text here.</div>
I used inline styles for this sample but you can easily place these in a stylesheet and reference the class or id.
To make the image move right:
float: right;
To make the text not wrapped:
clear: right;
For best practice, put the css code in your stylesheets file. Once you add more code, it will look messy and hard to edit.
My workaround for this issue was to set display: inline to the image element.
With this, your image and text will be aligned to the right if you set text-align: right from a parent container.
Easier / more organized way to do this is with some css.
CSS Above, HTML below with the snippet.
div {
clear: right;
}
/*
img {
float:right
}*/
/* img part is unneeded unless you want it to be a image on the right the whole time */
<html>
<!-- i am using an image from my website as a quick example-->
<img src="https://raw.githubusercontent.com/ksIsCute/GtGraffiti/gh-pages/icon.ico" alt="my image!" style=float:right>
<div>My Text Here</div>
<!-- Text goes below the image, and not beside it.-->
<img src="https://raw.githubusercontent.com/ksIsCute/GtGraffiti/gh-pages/icon.ico" alt="my image!" style=float:right>
<div>
<h1> I support headers! </h1>
<blockquote> And blockquotes!! </blockquote>
and hyperlinks!
</div>
<!-- THE CODE BELOW HERE IS **NOT** NEEDED!! (except for the </html>) -->
<h2 style="text-align:center;color:Grey;font-family:verdana"> Honestly I hope this helped you, if there is any error to my work please feel free to tell me. </h2>
</html>