2016-05-02 8 views
0

Ich brauche ein div-Element zu zentrieren, die keine Breite hat (es dauert seine Breite vom inneren div.CSS Margen für Elemente ohne Breite

<html> 
<head> 
    <title></title> 
    <style type="text/css"> 
    .outer { 
     padding: 10px; 
     /*margin: auto; (doesn´t work)*/ 
     background-color: #000; 
     display: inline-block; 
    } 
    .inner { 
     width: 400px; 
     height: 400px; 
     text-align: center; 
     background-color: #CCC; 
    } 
    </style> 
</head> 
<body> 

    <div class="outer"> 
     <div class="inner"></div> 
    </div> 
</body> 
</html> 

Irgendwelche Ideen, wie dies zu beheben, ohne eine Breite einstellen?

+0

'body {text-align: center}' – Oriol

Antwort

0

können Sie diese auf dem Körper oder .outer

Dadurch wird Ihr div horizontal und vertikal zentriert.

position: absolute; 
top:50%; 
left: 50%; 
transform: translate3d(-50%,-50%, 0); 
-1

Zur horizontalen Zentrierung, da die Mutter ist relativ;

.outer { 
     position: absolute; 
     left: 50%; 
     transform: translateX(-50%); 
     padding: 10px; 
     background-color: #000; 
     display: inline-block; 
    }