如何让我的文本位于我的 div 顶部？答案

【问题标题】：How can I get my text to position at the top of my divs?如何让我的文本位于我的 div 顶部？
【发布时间】：2014-09-27 19:03:53
【问题描述】：

我的每个 div 中都有文本，但它不在我希望的 div 顶部。我尝试将它们的位置更改为固定并使用 padding:0px;边距：0px；但这些都不起作用。

这是一个 JS Fiddle： http://jsfiddle.net/x3c7z4qn/

CSS：

body {
    height:97.54%;
    width:98.8%;
    background-color:#0C0C0B;
}
#nw {
    background-image:url('clevelandnight.jpg');
    position:absolute;
    height:50%;
    width:49%;
    background-size:cover;
    border-radius:10px;
}
#ne {
    background-image:url('news2.jpg');
    position:absolute;
    background-size:cover;
    height:50%;
    width:49.4%;
    left:50%;
    border-radius:10px;
}
#sw {
    background-image:url('drinks1.jpg');
    position:absolute;
    background-size:cover;
    height:46.5%;
    width:49%;
    top:52.15%;
    border-radius:10px;
}
#se {
    background-image:url('clevelandday.jpg');
    position:absolute;
    background-size:cover;
    height:46.5%;
    width:49.4%;
    left:50%;
    top:52.15%;
    border-radius:10px;
}
.titletext {
    text-align:center;
    font-family: 'Open Sans Condensed', sans-serif;
    font-weight:100;
    color:white;
    white-space:nowrap;
    font-size:200%;
}

HTML：

<!DOCTYPE html>
<html>
  <head>
    <link rel='stylesheet' type='text/css' href='stylesheet2.css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Lato:100,700' rel='stylesheet' type='text/css'>
    <title>CDC</title>
  </head>
  <body>
    <div id='nw'>
      <p class='titletext'>Nightlife</p>
    </div>
    <div id='ne'>
      <p class='titletext'>News</p>
    </div>
    <div id='sw'>
      <p class='titletext'>Food & Drink</p>
    </div>
    <div id='se'>
      <p class='titletext'>Events</p>
    </div>
  </body>
</html>

【问题讨论】：

试试这个 - jsfiddle.net/axq8uhrr

标签： css css-position

【解决方案1】：

您可以简单地将margin: 0 添加到.titletext 类，因为p 元素的默认css 设置是：

p {
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
}

所以：

.titletext {
    text-align:center;
    font-family:'Open Sans Condensed', sans-serif;
    font-weight:100;
    color:white;
    white-space:nowrap;
    font-size:200%;
    margin: 0;/*Add margin 0*/
}

body {
    height:97.54%;
    width:98.8%;
    background-image:url('http://robinsunnepostcard.com/wp-content/uploads/2013/10/Robinsunne-11-OC-13-e.jpg');
}
#nw {
    background-image:url('clevelandnight.jpg');
    position:absolute;
    height:50%;
    width:49%;
    background-size:cover;
    border-radius:10px;
}
#ne {
    background-image:url('news2.jpg');
    position:absolute;
    background-size:cover;
    height:50%;
    width:49.4%;
    left:50%;
    border-radius:10px;
}
#sw {
    background-image:url('drinks1.jpg');
    position:absolute;
    background-size:cover;
    height:46.5%;
    width:49%;
    top:52.15%;
    border-radius:10px;
}
#se {
    background-image:url('clevelandday.jpg');
    position:absolute;
    background-size:cover;
    height:46.5%;
    width:49.4%;
    left:50%;
    top:52.15%;
    border-radius:10px;
}
.titletext {
    text-align:center;
    font-family:'Open Sans Condensed', sans-serif;
    font-weight:100;
    color:white;
    white-space:nowrap;
    font-size:200%;
    margin: 0;
}

<body>
    <div id='nw'>
        <p class='titletext'>Nightlife</p>
    </div>
    <div id='ne'>
        <p class='titletext'>News</p>
    </div>
    <div id='sw'>
        <p class='titletext'>Food & Drink</p>
    </div>
    <div id='se'>
        <p class='titletext'>Events</p>
    </div>
</body>

【讨论】：

别忘了也给 +1 :)