Question

我一直试图复制这张图片，这是一个中文论坛的导航栏。图片是中文的，但我相信你应该能够明白这一点。简而言之，文本不是垂直居中，而是靠近上边界2px。我尝试为它设置行高，但这样做会使文本垂直居中。有谁知道如何调整文本以“移动它”一点点？谢谢。

以下是我写的代码：

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

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

Answer 1

刚刚将position:relative;和top:-2px;添加到.content css：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

也许您可以使用CSS3 Flexbox模块。只需处理.content选择器即可。

#box {
  width: 280px;
  background-color: #333;
  border-bottom: 1px dotted #fff;
}

.content {
  height: 30px;
  display: flex;
  flex-direction: row;
  /* center vertically if flex-direction is row */
  /* center horizontally if flex-direction is column */
  align-items: center;
  /* center horizontally if flex-direction is row */
  /* center vertically if flex-direction is column */
  /* justify-content: center; */
  border-top: 1px dotted #fff;
  text-align: left;
  font: 14px/30px "宋体";
  color: #fff;
}

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

设置文本的垂直位置时遇到问题

2 个答案: