<style>
.thin-blue-border {
border-color: blue;
border-width: 15px;
border-style: solid;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 10px;
background-position: center 50%;
}
</style>
<h1 class= "text-primary text-center">Hello Svana</h1>
<h2 class = "color : green text-center">This is text</h2>
<!.. Following code works for left and right but not for center. ..>
<img class= "thin-blue-border align= left" src= "http://4.bp.blogspot.com/-RUy0iuUdEOs/UrIVTuRchbI/AAAAAAAAivI/PfDjbIKnjZI/s640/Wolf-and-Moon-Cool-HD-Wallpapers.jpg" alt= “Black and White Wolf” >
<img class= "thin-blue-border align= center" src= "http://4.bp.blogspot.com/-RUy0iuUdEOs/UrIVTuRchbI/AAAAAAAAivI/PfDjbIKnjZI/s640/Wolf-and-Moon-Cool-HD-Wallpapers.jpg" alt= “Black and White Wolf” >
<!..Insted I have to use height and width..>
<img class= "thin-blue-border" src= "http://4.bp.blogspot.com/-RUy0iuUdEOs/UrIVTuRchbI/AAAAAAAAivI/PfDjbIKnjZI/s640/Wolf-and-Moon-Cool-HD-Wallpapers.jpg" alt= “Black and White Wolf” height="402" width="902">
To get help you need to explain what the problem is, what you’re trying to achieve, and post the code that you’re having a problem with, ideally using something like codepen so people can see the issue. At the minute what you’ve posted doesn’t make sense: it’s just a random collection of a CSS declaration, two lines of placeholder text and some pictures that doesn’t seem to have anything to do with the question in the title
You can’t put style information in a class
attribute, it needs to actually go in the CSS.
<img class= "thin-blue-border align= left"
With that, you are giving the image the classes thin-blue-border
, align=
(which is a syntax error) and left
If align
was an actual CSS attribute, you could do:
<img class="thin-blue-border" style="align: left;"
But it isn’t, so you can’t, there’s no such property. I’m still not sure what you’re actually trying to do here, positioning-wise. Whatever you have is working accidentally, it’s not because you’re adding things to the class
attribute.
I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>
) will also add backticks around text.
Hello Dan,
Thanks for your feedback.
What I need to achieve is that picture which put up via the URL should be in the centre rather than left of the page.
You normally align to a parent, not on the element itself. eg:
<figure class="image-container">
<img class="thin-blue-border" src="http://4.bp.blogspot.com/-RUy0iuUdEOs/UrIVTuRchbI/AAAAAAAAivI/PfDjbIKnjZI/s640/Wolf-and-Moon-Cool-HD-Wallpapers.jpg" alt=“Black and White Wolf” />
</figure>
// The container used is a block-level element, meaning will got to
// 100% of the page width automatically:
.image-container {
// An img is an inline element, and gets treated the same as text:
text-align: center;
padding: 10px 20px 20px 10px;
}
// Not sure if you want the border on the container, or on the image itself,
// but if you're going to call it thin-blue-border, make the class _just_
// create a thin blue border:
.thin-blue-border {
border: 15px solid blue;
}
Thanks, Dan. That makes sense. Will try it.
It works as required. I just had to increase L and R padding px and the image gets centred.
What if I want to create a folder of images and call them instead of using an image from the web. Pl can help me on this too. This is for Codepen project “Build a tribute page”. I have few images on the computer which want to add.
Yeah, you’ve got more padding on the left than on the right in the original, which would knock it off a bit.
Regarding folders of images, basic CodePen does not support that; it’s for simple little code sketches, not full projects. However CodePen has projects
as well, and you get one free. That lets you build a whole project, with folders, and I think it lets you have images.
Otherwise, upload them to somewhere online and reference them that way
Thanks Dan for the input.
With half an hour of google search, i found a way to inserting a jpg picture stored within Google Drive.
One just needs to get the link to the image from My Drive used it with img src. But need to change open to uc. E.g.
https://docs.google.com/open?id=abceicndidin1abkb10203339
use this URL
https://docs.google.com/uc?id=abceicndidin1abkb10203339
For far so good… Only thing same doesn’t seem to work with bit.ly converted links.