Question

我有五个不同的图像用作我网站导航的按钮。我希望它们在浏览器窗口中水平居中并居中。他们看起来很好，直到我添加代码，当鼠标悬停在每个图像上时，每个按钮下都会显示文字。这些按钮现在全部垂直对齐在窗口中间。

在html文件中：

   <div class="nav">
        <div class="container">
            <ul>
            <div class="about">
            <li><input type="image" src="image.png" id="aboutPage" onClick = 'aboutPage()'/></li>
            <p class = "text1"> About </p>
            </div>

            <div class="resume">
            <li><input type="image" src="image.png" id="resumePage" onClick = 'resumePage()'/></li>
            <p class = "text2"> Resume </p>
            </div>

            <div class="home">
            <li><input type="image" src="image.png" id="homePage" onClick = 'homePage()'/></li>
            <p class = "text3"> Home </p>
            </div>

            <div class="portfolio">
            <li><input type="image" src="image.png" id="portfolioPage" onClick = 'portfolioPage()'/></li>
            <p class = "text4"> Portfolio </p>
            </div>

            <div class="contact">
            <li><input type="image" src="image.png" id="contactPage" onClick = 'contactPage()'/></li>
            <p class = "text5"> Contact </p>
            </div>
        </ul>
        </div>

在CSS文件中：

.nav {
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.nav .container {
   font-size: 12px;
  font-family: 'Shift', sans-serif;
  color: #5a5a5a;
  font-weight: lighter;
}

.nav .container ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.nav .container li {
  display: inline;
}

以下是每张图片的悬停代码示例：

.nav .container .about .text1 {
   position:relative;
   bottom:0px;
   text-align: center;
   visibility: hidden;
}

.nav .container .about:hover .text1{
   visibility: visible;
}

任何帮助将不胜感激！谢谢。

Answer 1

首先，关于你的标记，我有一些评论。我知道这不是代码审查，与问题不完全相关，但是当我查看HTML时，我无法自拔：

div.nav只是尖叫我说你其实想要使用nav
div.container似乎对我产生了影响，只是添加了标记。如果你真的需要容器类（出于css或js的原因），为什么不把它添加到ul呢。
ul只能将li个元素作为直接子元素，因此这些div元素应该成为li的子元素，而不是父元素。
为什么你使用（非常罕见的）input[type=image]元素，而不是通常的<a><img></a>？这看起来很奇怪。
为每个文本使用不同的类似乎没有用处。它只是让你的代码更难维护，你的css更冗长。我想知道你是否需要一个课程，但如果你有充分的理由，至少对所有文本块使用相同的课程。

考虑到这些评论，我的标记看起来像这样：

<nav>
    <ul class='container'>
        <li>
            <a href='#'>
                <img src='' alt='do not forget your alt, especially for nav!' />
                <p>text</p>
            </a>
        </li>
        ...
    </ul>
</nav>

然后，对于您的实际问题，我并不完全确定我理解您要实现的目标，但是this is what I came up with。 css看起来像这样。

nav {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    text-align: center;
}
nav ul {
    font-size: 12px;
    font-family:'Shift', sans-serif;
    color: #5a5a5a;
    font-weight: lighter;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
nav li {
    margin: 12px;
    display: inline-block;
}

nav p {
    opacity: 0;
    transition: opacity .5s;
}
nav a:hover p {
    opacity: 1;
}

请注意，我选择了opacity代替visibility，因为这样可以添加转换，我发现这种转换可以提供更好的体验。您应该能够使用可见性（或者只是删除转换）以进行即时状态切换。

我希望这会让你走上正轨。如果我误解了任何内容，或者您是否希望我进一步解释，请告诉我。

导航栏由图像组成

1 个答案: