How to align an absolute div

问题:

I have the following code:

body{   margin: 10px; }   .menu {   border: solid black;   border-width: 1px 1px 0px 1px;   background-color: black;   color: white;   width: 300px;   position: relative;   padding: 12px; }  .menu:hover{   background-color: white;   color: black; } .dropdown {   position: absolute;   background-color: white;   width: 200px;   left: -1px;   border: solid black;   border-width: 0px 1px 1px 1px;   color:black;   top:100%; } .dropdown ul {   list-style: none;   padding: 10px;   margin: 0; } .zoom {   zoom: 200%; }

<div class="menu zoom">   Click me   <div class="dropdown">     <ul>       <li>Item 1</li>       <li>Item 2</li>       <li>Item 3</li>     </ul>   </div> </div>

There is a line break(on the left). How can I fix this? On some zoomlevels it is not showing up, but on my default zoom it is very clear on my website. I tested it on serveral webbrowsers and all of them have this problem.

回答1:

body{   margin: 10px; }   .menu {   border: solid black;   border-width: 1px 1px 0px 1px;   background-color: black;   color: white;   width: 200px;   position: relative; }  .menu:hover{   background-color: white;   color: black; } .dropdown {   position: absolute;   background-color: white;   width: 200px;   left: -1px;   border: solid black;   border-width: 0px 1px 1px 1px;   color:black;   top:100%; } .dropdown ul {   list-style: none;   padding: 10px;   margin: 0; } .zoom {   zoom: 200%; }

<div class="menu zoom">   Click me   <div class="dropdown">     <ul>       <li>Item 1</li>       <li>Item 2</li>       <li>Item 3</li>     </ul>   </div> </div>

回答2:

#somelement { position: absolute; left: 0; right: 0; margin: auto } 

文章来源: How to align an absolute div