2017-06-14 33 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>