<align> when used with URL for adding picuter works for left and right but not for center

<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.

markdown_Forums

1 Like

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;
}
1 Like

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

1 Like

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.