2 replies [Last post]
ps
ps's picture
Offline
newbie
Last seen: 6 years 31 weeks ago
Timezone: GMT+2
Joined: 2014-02-15
Posts: 2
Points: 5

Sad(
My markup page contains 2 elements as follows:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>xxx</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <style>
         html 
         {
          width: 100%; 
          height: 100%;
         }
         Body 
         {
          height: 100%;
          width: 100%;
         }
         div#bg
         {    
          height:320px; 
          width:850px;
          margin: auto;
          background-color: blue;
         }
         #black 
         {
         position: absolute;
         background-color: black;
         width:33%;
         height:13%;
         margin:90px auto 0;
        }
    </style>
    </head>
<body>
  <ul id="black"> </ul>
  <div id="bg"></div>
</body>
</html>

I want to place #black inside #bg, centered 13% below its' top margin. Unfortunately I can't get #black centered ! What I'm getting is displayed with the attached image.

Can anyone tell me please how to center #black keeping "bg" at its' place?
Thanks

AttachmentSize
to_forum.png986 bytes
to_forum.png986 bytes
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi ps, try this: #black

Hi ps,
try this:

#black 
         {
         position: absolute;
         background-color: black;
         width:33%;
         height:13%;
         left:50%;
         margin:90px 0 0 -16.5%;
        }

ps
ps's picture
Offline
newbie
Last seen: 6 years 31 weeks ago
Timezone: GMT+2
Joined: 2014-02-15
Posts: 2
Points: 5

Thank you so much Tony

That was very helpful !