margin-left und margin-right für die Einstellung der Center-position

Möchte ich, um das Zentrum der .user-menu position, aber mein code unten funktioniert nicht. Wie kann ich dieses Problem lösen?

HTML -

<body>
    <div class="user-menu">
        <div class="menu-items">
            <div class="bought-tickects centered hover-effect"></div>
            <label>تاریخچه خرید</label>
        </div>
        <div class="menu-items">
            <div class="profile centered hover-effect"></div>
            <label>حساب کاربری</label>
        </div>
        <div class=""></div>
    </div>
    <div class="clear"></div>
    <div class="container-of-selected">
    </div>
</body>

CSS

* {
    margin: 0px;
    padding: 0px;
    font-family: Tahoma;
}

.centered {
    margin-left: auto;
    margin-right: auto;
}

.menu-items {
    float: left;
    height: 90px;
    margin-left: 10px;
    margin-right: 10px;
}

.profile {
    width: 72px;
    height: 72px;
    padding-left: 10px;
    padding-right: 10px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('Images/folder-contacts-icon.png');
    border-radius: 5px;
}

.bought-tickects {
    width: 72px;
    height: 72px;
    padding-left: 10px;
    padding-right: 10px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('Images/tickets-icon.png');
    border-radius: 5px;
}
.clear {
    clear:both;
}
.user-menu {
    margin-left:auto;
    margin-right:auto;
}
geben Sie Ihre Breite und setzen Sie margin:0 auto;(oben,unten ist legen Sie es, wenn u wollen), das ist es..!
Können Sie bitte teilen Sie die Bilder, die Sie in der css?

InformationsquelleAutor | 2013-08-07

  1. 7

    Geben die .user-menu eine Breite, derzeit ist es ein block-element, so wird Sie füllen Ihre container. Dies bewirkt, dass die user-menu zu erweitern, um 100% Breite über die Seite, die technisch zentriert, Sie einfach nicht bemerken.

    .user-menu {
    margin-left:auto;
    margin-right:auto;
    width: 100px;
}
    Vielen Dank, das ist gearbeitet. 🙂 aber ich will set display:inline-block Verpackung Inhalt...

    InformationsquelleAutor Kevin Bowersox

  2. 3

    machen dieses

    http://jsfiddle.net/2VMrf/

    CSS

    .user-menu {
    margin-left:auto;
    margin-right:auto;
   width:50%;
}

    InformationsquelleAutor Falguni Panchal

  3. 2

    versuchen, diese 

     .user-menu {  
  margin : 0 auto;
width:50%;
clear:both;   
}

    finden Sie diese FIDDLE
    Sie benötigen zum anzeigen einer durch ein 

     .user-menu {  
      margin : 0 auto;
    width:100px;
    clear:both;   
    }

    InformationsquelleAutor VIVEK-MDU

  4. 2

    Diese Klasse verwenden, anstelle von Ihr .Benutzer-Menü-Klasse

    .user-menu {
    margin:0 auto;
    width:300px;
}

    Oder fügen Sie einfach die Breite Ihrer .Benutzer-Menü-Klasse. Das tun wird der trick für Sie.

    JSFiddle:
    Beispiel Arbeiten.. Klicken Sie Hier

    InformationsquelleAutor Elegant Coder

  5. -1

    Dafür müssen Sie geben die Breite von einem tag 

    .user-menu {
    margin-left: auto;
    margin-right: auto;
    width: 100px;
}

    InformationsquelleAutor Douglas Rivera

Schreibe einen Kommentar