Wie Rand und rechts/links in CSS übersteuern?

Question

Ich habe ein div mit diesem Styling:

#slogan{ 
    font-size:24px; 
    position:absolute; 
    left:0; 
    right:0; 
    margin-left:auto; 
    margin-right:auto; 
} 

Letztere 4 Arten nur die div Inhalt auf der Seite zentrieren.

Wenn die Seite zu groß wird, ich will nicht mehr den folgenden Styling verwenden, so dass ich anwenden diesen Stil:

@media only screen and (min-width: 941px){ 
    #slogan { 
     font-size: 24px; 
     position: absolute; 
     min-width: 810px; 
     text-align: right; 
    } 
} 

, die den Inhalt einer bestimmten Menge vom linken Rand der Seite zeigt . Ich habe diese Stile im f12-Entwicklungstool getestet und es sieht gut aus. Wenn ich jedoch den Stil innerhalb des CSS-Arbeitsblattes anwende, werden der Rand und die rechten/linken Teile immer noch auf das Element angewendet, und ich weiß nicht, wie ich sie abbrechen kann (es gibt keinen Standardwert für den Rand).

Irgendwelche Hilfe?

Answer 1

Verwenden Sie none, inherit or initial, um es zu deaktivieren.

@media only screen and (min-width: 941px){ 
    #slogan { 
     font-size: 24px; 
     position: absolute; 
     min-width: 810px; 
     text-align: right; 
     margin-left:none; 
     margin-right:none; 
    } 
} 

Answer 2

Sie könnten versuchen:

margin-left: unset; 
margin-right: unset; 

Aber ich bin nicht sicher, wie gut unterstützt sie sind. Alternativ können Sie sie auf 0 setzen, was die Standardeinstellung ist;

Answer 3

wenn u die CSS überschrieben werden soll, dann müssen u verwenden wichtig, nach Attribut wie folgt: -

#slogan{ 
    font-size:24px; 
    position:absolute; 
    left:0; 
    right:0; 
    margin-left:auto !important;//Whatever u want to overwrite 
    margin-right:auto !important; 
} 

Answer 4

Sie auch @media andersrum

@media only screen and (max-width: 941px){ 
    #slogan { 
    position:absolute; 
    left:0; 
    right:0;} 
    }