1

I have been playing around with div tag for sometime now and i tried doing the rounded corner div tag

<div id="y" style="border: 3px solid #000000;background: #b4ef05; border-radius: 25px;width: 300px; height:200px;"> <div id="ds"style="width:100%; height:80%;border-top-left-radius: 2em;border-top-right-radius:2em; background: #b4ef05;"><span> <img style="display: block; margin:auto;border: 0 none; position: absolute;left:40px;top:30px;" src="http://www.urbanfonts.com/images/cache/fontnames/1f99582aeadde4d87491dd323d5f01db_auto_362_97.jpg"> </span></div> <div id="dscs"style="border-bottom-left-radius: 1em;border-bottom-right-radius:1em;width:100%;height:20%;background: #000000;color:#ffffff;"><span style="padding:35px;">sssd</span></div> </div>

output of the above code

but i am not able to set the image alignment properly, this vertical-align:middle; doesn't work. I need the image to come into the middle of the div automatically deciding the left and top. Also is this approach right to divide the div element into two to store 2 different values?

Improve this question

4 Answers 4

Reset to default
1

It's not good to use inline style in html elements :)

html

<img class="imgLackey" src="http://www.urbanfonts.com/images/cache/fontnames/1f99582aeadde4d87491dd323d5f01db_auto_362_97.jpg">

css

.imgLackey{ display: table-cell; border: 0 none; margin: 0 auto; } #imgCont{ display: table-cell; vertical-align: middle; } #ds{ display:table; }

fiddle

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

Display the parent (#y)as a table (display: table) and then set the span around the image as a table cell (display: table-cell).

This will allow you to use the positioning powers whilst keeping your code semantic.

See this updated codepen:

http://codepen.io/JRKyte/pen/ptaeI

Improve this answer

6 Comments

I tried that too. It does align the image in middle but the top margin is still 0. Only the left margin gets adjusted.
Just add left: 50%; and margin-left: -116px; to the code also, i've updated the link for you.
this does work but the image inside the div tag can change. It could be of varying width and height
You could try making the margins in percentages as well, i've updated the link, and split the CSS and HTML which is good practise :)
#y { border: 3px solid #000000; background: #b4ef05; border-radius: 25px; width: 300px; height:200px; } change the width and height and it again displaces the image
|
1

Try adding display:table to the div that contain the image.

Improve this answer

Comments

0

To the parent div of this image (id- 'ds') add "position:relative"

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.