Gropai Gropai - 4 months ago 10
CSS Question

Trouble with setting the vertical position of text

enter image description here

I've been trying to replicate this picture, which is a navigation bar on a Chinese forum. The picture is in Chinese but I believe you should be able to get the point. In short, the text is not vertically centered but 2px closer to the upper border. I tried setting line-height for it but doing so makes the text vertically centered instead. Does anyone know how to adjust the text to "move it up" a little bit? Thank you.

The following is the code I write:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>练习1</title>
<style>
#box {
width: 280px;
background-color: #333;
border-bottom: 1px dotted #fff;
}
.content {
/*height: 30px;*/
border-top: 1px dotted #fff;
text-align: left;
font: 14px/30px "宋体";
color: #fff;
}

</style>
</head>
<body>
<div id="box">
<div class="content" id="syllabus">课程大纲</div>
<div class="content" id="video">妙味视频</div>
<div class="content" id="forum">妙味论坛</div>
</div>

</body>

Answer

Just added position:relative; and top:-2px; to your .content css:

#box {
  width: 280px;
  background-color: #333;
  border-bottom: 1px dotted #fff;
}

.content {
  /*height: 30px;*/
  border-top: 1px dotted #fff;
  text-align: left;
  font-size: 14px/30px "宋体";
  color: #fff;
  position:relative;
  top: -2px;
}
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>练习1</title>
</head>
<body>
    <div id="box">
        <div class="content" id="syllabus">课程大纲</div>
        <div class="content" id="video">妙味视频</div>
        <div class="content" id="forum">妙味论坛</div>
    </div>

</body>

Comments