2017-06-14 3 views
1

Ich mache ein Diplom in digitalen Medien, so bin ich wirklich neu in der Codierung und ich bin auf einem bestimmten Stück stecken geblieben. Ich muss ein paar Dinge zentrieren und ablegen, aber trotz all meiner Suchen und Versuchen mit all den Lösungen, die ich gefunden habe, scheint nichts geklappt zu haben, und jetzt hole ich um und frage um Hilfe. Wie kann ich diese:Nicht in der Lage, Dinge mit CSS zu zentrieren

body { 
 
    background-color: rgb(153, 145, 122); 
 
} 
 

 
.grey { 
 
    background-color: black; 
 
    color: white; 
 
    width: 100%; 
 
    overflow: hidden 
 
} 
 

 
.navbar { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
li { 
 
    float: right; 
 
    border-left: 1px solid white 
 
} 
 

 
li a { 
 
    display: block; 
 
    padding: 8px; 
 
    background-color: black; 
 
} 
 

 
li h1 { 
 
    display: block; 
 
    padding: 8px; 
 
    background-color: black; 
 
} 
 

 
.floating { 
 
    float: left; 
 
    display: block; 
 
    border-left: none 
 
} 
 

 
li a:hover { 
 
    background-color: grey; 
 
} 
 

 
p { 
 
    width: 50%; 
 
    word-break: break-all; 
 
    text-align: center 
 
} 
 

 
body { 
 
    background: url("file:///C:/Users/clark/Documents/CSS/Photography Masters Website - Existing/Pm-logo.png"); 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    background-position: center; 
 
} 
 

 
.buttonHolder { 
 
    text-align: center 
 
} 
 

 
.button { 
 
    width: 250px; 
 
    height: 50px; 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    display: inline-block; 
 
    line-height: 50px; 
 
    text-align: center; 
 
}
<header class="grey"> 
 
    <ul class="navbar"> 
 
    <li class="floating"><a>Photography Masters</a></li> 
 
    <li><a href="#link"> Link 1</a></li> 
 
    <li><a href="#link"> Link 2</a></li> 
 
    <li><a href="#link"> Link 3</a></li> 
 
    <li><a href="#link"> Link 4</a></li> 
 
    </ul> 
 
</header> 
 

 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam magna erat, mollis nec rutrum in, hendrerit consectetur justo. Cras dictum facilisis nibh, eu tincidunt nisi. Vivamus facilisis vitae dolor eu sodales. Nunc imperdiet ex quis laoreet euismod. 
 
    Duis vitae feugiat neque, eu viverra mauris. Mauris convallis sodales velit, at rhoncus odio. 
 
</p> 
 

 
<div class="buttonHolder"> 
 
    <input class=button type="submit" value="See More"> 
 
</div>

Um etwa wie folgt aussehen:

https://i.stack.imgur.com/CyrlY.png

Alle Elemente für verschiedene Bildschirmauflösungen in der Lage sein müssen, um die Größe, erklären Sie mir bitte was ich falsch mache.

Antwort

0

Fügen Sie einfach margin: auto; zu Ihrem p Element:

p { 
    width: 50%; 
    margin: auto; 
    word-break: break-all; 
    text-align: center 
} 

5 Minuten Nehmen Sie die folgenden lesen wird viel

REF helfen: https://www.w3.org/Style/Examples/007/center.en.html

enter image description here

body { 
 
    background-color: rgb(153, 145, 122); 
 
} 
 

 
.grey { 
 
    background-color: black; 
 
    color: white; 
 
    width: 100%; 
 
    overflow: hidden 
 
} 
 

 
.navbar { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
li { 
 
    float: right; 
 
    border-left: 1px solid white 
 
} 
 

 
li a { 
 
    display: block; 
 
    padding: 8px; 
 
    background-color: black; 
 
} 
 

 
li h1 { 
 
    display: block; 
 
    padding: 8px; 
 
    background-color: black; 
 
} 
 

 
.floating { 
 
    float: left; 
 
    display: block; 
 
    border-left: none 
 
} 
 

 
li a:hover { 
 
    background-color: grey; 
 
} 
 

 
p { 
 
    width: 50%; 
 
    margin: auto; 
 
    word-break: break-all; 
 
    text-align: center 
 
} 
 

 
body { 
 
    background: url("file:///C:/Users/clark/Documents/CSS/Photography Masters Website - Existing/Pm-logo.png"); 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    background-position: center; 
 
} 
 

 
.buttonHolder { 
 
    text-align: center 
 
} 
 

 
.button { 
 
    width: 250px; 
 
    height: 50px; 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    display: inline-block; 
 
    line-height: 50px; 
 
    text-align: center; 
 
}
<header class="grey"> 
 

 
    <ul class="navbar"> 
 
    <li class="floating"><a>Photography Masters</a></li> 
 
    <li><a href="#link"> Link 1</a></li> 
 
    <li><a href="#link"> Link 2</a></li> 
 
    <li><a href="#link"> Link 3</a></li> 
 
    <li><a href="#link"> Link 4</a></li> 
 
    </ul> 
 
</header> 
 

 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam magna erat, mollis nec rutrum in, hendrerit consectetur justo. Cras dictum facilisis nibh, eu tincidunt nisi. Vivamus facilisis vitae dolor eu sodales. Nunc imperdiet ex quis laoreet euismod. 
 
    Duis vitae feugiat neque, eu viverra mauris. Mauris convallis sodales velit, at rhoncus odio. 
 
</p> 
 

 
<div class="buttonHolder"> 
 
    <input class=button type="submit" value="See More"> 
 
</div>