如何将图片放在div的顶部（水平居中，垂直居中，居中）

Question

I am writing a blog post (blogger) in which I wanna share a letter. The text of this letter I have put it in a div with a light grey color and a shadow on the right and bottom so it looks like a piece of paper.

My HTML says something like:

This is my post. Blah blah blah<br />
<br />
Here is more text, blah bla blah. And this is the letter:<br />
<br />
<div style="background-color: #f7f7f7; box-shadow: 3px 3px 8px #DBDBDB; padding-bottom: 20px; padding-left: 40px; padding-right: 20px; padding-top: 35px;">
28 August 2015<br />
<br />
This is the letter, blah blah blah.<br />
<br />
Here mor parragraphs of the letter, bla bla bla. <br />
<br />

This makes my post look like this: http://i.stack.imgur.com/xUNNL.png

Now, I want to add a digital washi tape (like a piece of cellotape) on top of my grey div, so it looks like the letter has been stuck there with the bit of cellotape.

Like this: http://i.stack.imgur.com/78kyz.jpg

How could I do this in the HTML? (I am writing directly in just one blogger blogspot)

Thanks.

Answer 1

You can add the image in the div, give it an id or class, and give it the properties: z-index:10; //or whatever number you want. What this does, it will bring this image in front of all other position:absolute; left: 50%; // it wil bring it in the middle.

<img src="image-src" style="z-index:10; position:absolute; left:50%">

Simplified version.

Answer 2

I suppose that your letter div is positioned relative . To implement this digital wash tape just put another div in your letter div and position it absolute . Something like that:
.cellotape { height:100px; width:400px; position:absolute; top:-20px; left:500px; }

Answer 3

Here is a fiddle example

add this .img class to your image:

.img{
    position: relative;
    top: 0;
    margin-top: -60px;
    left: calc(50% - 50px);
    width: 100px;
    height: 50px;
    background: lightcoral;
}

This will set your image position to relative, at the top of the letter, into its center.

You will have to add the image inside your letter like this:

<div class='letter'>
    <div class='img'></div>
    28 August 2015<br />
    <br />
    This is the letter, blah blah blah.<br />
    <br />
    Here mor parragraphs of the letter, bla bla bla. <br />
    <br />

</div>

Notice that I have div just to show you how to get things done.

Answer 4

You may need to adjust the left percent, height and width to suit your needs, but this should work for you

<style>
.topImg {
    position: absolute;
    left: 25%;
    z-index: 10;
    width: 500px;
    height: 335px;
}
</style>



<img src="" class="topImg">

Answer 5

you could try something like the following if you only can aply inline styles...

 This is my post. Blah blah blah<br /> <br /> Here is more text, blah bla blah. And this is the letter:<br /> <br /><br /><br /> <div style="background-color: #f7f7f7; box-shadow: 3px 3px 8px #DBDBDB; padding-bottom: 20px; padding-left: 40px; padding-right: 20px; padding-top: 35px;"> <div style="width:50px; margin:0 auto"> <img style="width:50px; position:absolute; margin:-60px auto 0;" src="https://i.stack.imgur.com/ue96u.jpg?s=328&g=1" /> </div> 28 August 2015<br /> <br /> This is the letter, blah blah blah.<br /> <br /> Here mor parragraphs of the letter, bla bla bla. <br /> <br />