Question

我的每个div中都有文本，但它并不位于我想要的div的顶部。我尝试将其位置更改为固定并使用填充：0px;保证金：0像素;但这些都没有奏效。

这是一个JS小提琴： 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>

Answer 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*/
}

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

1 个答案: