2017-06-14 64 views
1

我正在做數字媒體文憑,所以我對編碼非常陌生,而且我已經陷入了一個特定的位。我需要集中和放下一些東西,但儘管我進行了所有搜索並嘗試了所有我找到的解決方案,但似乎沒有任何成效,所以現在我正在冒險尋求幫助。我如何獲得這樣的:無法使用CSS居中事物

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>

要看起來像這樣:

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

所有元素都能夠調整爲不同的屏幕分辨率,請告訴我我做錯了什麼。

回答

0

只需添加margin: auto;到您的p元素:

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

取5分鐘閱讀以下將有很大的幫助

REF: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>