Question

我即将编制导航栏。问题是导航栏中的文本被挤压。我认为这是因为相对和绝对的定位。

这是导致此错误的代码：

＆＃13;

div.menu {
       float: right;
       position: relative;
    }

    div.menu a {
       text-decoration: none;
       position: absolute;
       top: 50%;
       transform: translateY (-50%);
    }

＆＃13;

但是我需要这段代码来垂直居中。如何使a元素垂直居中并且文本不会挤压在一起？

＆＃13;

/*****************************************************************************************************************************************/
/************************************************************* styles.css ***************************************************************/
/*****************************************************************************************************************************************/


/*****************************************************************************************************************************************/
/* *** START:Colors *** */
/*****************************************************************************************************************************************/

/*
Blau: #1f4ebc;
Dunkel Grau: #3d3f45;
Hell Grau: #e5e5e5;
Rot: #a62c21
*/

/*****************************************************************************************************************************************/
/* *** END:Colors *** */
/*****************************************************************************************************************************************/


/*****************************************************************************************************************************************/
/* *** START:General Settings *** */
/*****************************************************************************************************************************************/

html{
  font-size: 62.5%;
}

body {
  margin: 0;
  font-family: 'Raleway', 'Lato', 'Helvetica Neue', 'Arial', sans-serif;
  font-size: 1.6rem;
}

* {
  box-sizing: border-box;
}

/*****************************************************************************************************************************************/
/* *** END:General Settings  *** */
/*****************************************************************************************************************************************/


/*****************************************************************************************************************************************/
/* *** START:Navigation *** */
/*****************************************************************************************************************************************/

.header-nav {
  width: 100%;
  height: 5rem;
  background-color: #3d3f45;
  font-weight: 400;
}

/* *** START: Logo *** */
.header-nav div {
  height:100%;
  display: inline-block;
  position: relative;
}

.header-nav div img {
  height: 3rem;
  width: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left:2rem;
}
/* *** END: Logo *** */

/* *** START: Menu *** */
div.menu {
  float:right;
  position:relative;
}

div.menu ul {
  height: 100%;
  margin: 0;
}

div.menu ul li {
  display: inline-block;
  height:100%;
  padding: 0 1rem;
}

div.menu a {
  text-decoration: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

div.menu a:link {
  color:#fff;
}

div.menu a:visited {
  color:#fff;
}

div.menu a:hover,
div.menu a:active {
  color:#e5e5e5;
}

.active {
  background-color: #a62c21;
}
/* *** END: Menu *** */


/*****************************************************************************************************************************************/
/* *** END:Navigation *** */
/*****************************************************************************************************************************************/

＆＃13;

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>Home</title>
    <link rel="stylesheet" type="text/css" href="src/css/styles.css">
  </head>
  <body>

    <!-- **************************************************************************************************************************************************** -->
    <!-- ***   START: Navigation *** -->
    <!-- **************************************************************************************************************************************************** -->

    <nav class="header-nav">

      <!-- *** START: Logo *** -->
      <div class="logo">
        <a href="index.html">
          <img src="src/img/logo.png" alt="logo">
        </a>
      </div>
      <!-- *** END: Logo *** -->

      <!-- *** START: Menu *** -->
      <div class="menu">
        <ul>
          <li class="active"><a href="index.html">Home</a></li>
          <li><a href="#">Lorem</a></li>
          <li><a href="#">Ipsum</a></li>
          <li><a href="#">Dolor</a></li>
        </ul>
      </div>
      <!-- *** END: Menu *** -->

    </nav>

    <!-- **************************************************************************************************************************************************** -->
    <!-- *** END: Navigation *** -->
    <!-- **************************************************************************************************************************************************** -->






  </body>
</html>

＆＃13;

Answer 1

我删除了一些评论，以便于阅读。

您想要删除absolute元素的a位置。当您定位这些absolute父元素时，您将无法按预期行事。您的问题在于，您absolute将一个a标记放在另一个标记之上，如果有意义，则父元素会忽略该元素的大小。

然后你想设置行高以便垂直对齐，如下所示：

div.menu a {
  text-decoration: none;
  vertical-align: middle;
  line-height: 5rem;
}

为了使其具有响应性，您将使用媒体查询来更改行高。

＆＃13;

html{
  font-size: 62.5%;
}

body {
  margin: 0;
  font-family: 'Raleway', 'Lato', 'Helvetica Neue', 'Arial', sans-serif;
  font-size: 1.6rem;
}

* {
  box-sizing: border-box;
}

.header-nav {
  width: 100%;
  height: 5rem;
  background-color: #3d3f45;
  font-weight: 400;
}

/* *** START: Logo *** */
.header-nav div {
  height:100%;
  display: inline-block;
  position: relative;
}

.header-nav div img {
  height: 3rem;
  width: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left:2rem;
}

div.menu {
  float:right;
  position:relative;
}

div.menu ul {
  height: 100%;
  margin: 0;
}

div.menu ul li {
  display: inline-block;
  height:100%;
  padding: 0 1rem;
}

div.menu a {
  text-decoration: none;
  vertical-align: middle;
  line-height: 5rem;
}

div.menu a:link {
  color:#fff;
}

div.menu a:visited {
  color:#fff;
}

div.menu a:hover,
div.menu a:active {
  color:#e5e5e5;
}

.active {
  background-color: #a62c21;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>Home</title>
    <link rel="stylesheet" type="text/css" href="src/css/styles.css">
  </head>
  <body>
    <nav class="header-nav">
      <div class="logo">
        <a href="index.html">
          <img src="src/img/logo.png" alt="logo">
        </a>
      </div>
      
      <div class="menu">
        <ul>
          <li class="active"><a href="index.html">Home</a></li>
          <li><a href="#">Lorem</a></li>
          <li><a href="#">Ipsum</a></li>
          <li><a href="#">Dolor</a></li>
        </ul>
      </div>
    </nav>
  </body>
</html>

＆＃13;

Answer 2

尝试以下方法：

div.menu ul li {
  display: inline-block;
  height:100%;
  padding: 0 1rem;
  text-align: center;

}

div.menu a {
  text-decoration: none;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  vertical-align: middle;
  line-height: normal;

}

https://jsfiddle.net/FraserAllan/tcmgzg1s/8/

Answer 3

我想知道你为什么不使用flex进行导航？它会给你更多关于你尝试的待办事项的控制权：

＆＃13;

/*! styles.css

 * Colors
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *
 *  Blau: #1f4ebc;
 *  Dunkel Grau: #3d3f45;
 *  Hell Grau: #e5e5e5;
 *  Rot: #a62c21
 * 
 */

/* General Settings
   ========================================================================== */
html{
  font-size: 62.5%;
}

body {
  margin: 0;
  font-family: 'Raleway', 'Lato', 'Helvetica Neue', 'Arial', sans-serif;
  font-size: 1.6rem;
}

* {
  box-sizing: border-box;
}

/* Navigation
   ========================================================================== */
.header-nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 5rem;
  background-color: #3d3f45;
  font-weight: 400;
}

/* Logo */
.logo {
  display: flex;
  padding-left: 2rem;
}
.logo img {
  height: 3rem;
}

/* Menu */
div.menu {
  position:relative;
  display: flex;
  width: inherit;
  height: inherit;
  justify-content: flex-end;
}

div.menu ul {
  height: inherit;
  margin: 0;
  display: flex;
}

div.menu ul li {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  height: inherit;
  padding: 0 1rem;
}

div.menu a {
  display: flex;
  text-decoration: none;
}

div.menu a:link {
  color:#fff;
}

div.menu a:visited {
  color:#fff;
}

div.menu a:hover,
div.menu a:active {
  color:#e5e5e5;
}

.active {
  background-color: #a62c21;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Home</title>
    <link rel="stylesheet" type="text/css" href="src/css/styles.css">
  </head>
  
  <body>
    <!-- ***   START: Navigation *** -->
    <nav class="header-nav">
      <!-- *** START: Logo *** -->
      <div class="logo">
        <a href="index.html">
          <img src="src/img/logo.png" alt="logo">
        </a>
      </div>
      <!-- *** END: Logo *** -->

      <!-- *** START: Menu *** -->
      <div class="menu">
        <ul>
          <li class="active"><a href="index.html">Home</a></li>
          <li><a href="#">Lorem</a></li>
          <li><a href="#">Ipsum</a></li>
          <li><a href="#">Dolor</a></li>
        </ul>
      </div>
      <!-- *** END: Menu *** -->
    </nav>
    <!-- *** END: Navigation *** -->
  </body>
</html>

＆＃13;

CSS：文字受到挤压。我该如何解决？

3 个答案: