Question

我试图将我的简历创建为网页，并且我在将H1与菜单（表格）对齐方面遇到了麻烦。他们在一条线上彼此相邻，但我希望我的桌子低于H1。这是HTML：

<div class="uvod">
 <h1>Name of the page</h1>
 </div>
 <div>
  <ul class="uvod">
   <li><a href="">Home</a></li>
   <li><a href="l">Introduction</a></li>
   <li><a href="">CV</a></li>
   <li><a href="">Galery</a></li>
   <li><a href="">My work</a></li>
   <li><a href="">Contact</a></li>
 </ul>
</div>

这里是CSS：

.uvod {
      height: 100%;
      width: 100%;
      display: flex;
      position: fixed;
      align-items: center;
      justify-content: justify;
      font-family: "Helvetica", sans-serif;
      color: #F0F8FF;
      text-transform: uppercase;
      letter-spacing: 3px;
 }

非常感谢

Answer 1

您是否需要display: flex是有原因的？如果没有，请使用下面的代码段我认为这是你要求的？让我知道。

.uvod {
  height: 100%;
  width: 100%;
  display: block;
  position: fixed;
  font-family: "Helvetica", sans-serif;
  color: #F0F8FF;
  text-transform: uppercase;
  letter-spacing: 3px;
}

.uvod h1 {
  text-align: center;
}

.uvod ul {
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

li {
  margin-right: 10px;
}

li:last-child {
  margin-right: 0px;
}

<div class="uvod">
  <h1>Name of the page</h1>
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="l">Introduction</a></li>
    <li><a href="">CV</a></li>
    <li><a href="">Galery</a></li>
    <li><a href="">My work</a></li>
    <li><a href="">Contact</a></li>
  </ul>
</div>

Answer 2

我首先建议您使用position:relative和display:block

.uvod {
   height: 100%;
   width: 100%;
   display: block;
   position: relative;
   align-items: center;
   justify-content: justify;
   font-family: "Helvetica", sans-serif;
   color: #F0F8FF;
   text-transform: uppercase;
   letter-spacing: 3px;
}

请参阅此处的示例 - ＆gt; https://jsfiddle.net/85em2hm0/

Answer 3

我不能100％确定您期望的结果布局。无论如何，我试图想出一些更适合你的东西。

实际上你根本不需要在这种情况下使用flex（至少还没有）。您需要修改代码的是，在使用flex时，大多数情况下，您有一个表示每个部分的容器并将项目添加到此容器中，并且因为您已使用相同的类.uvod两次并且它标记为固定，均占据同一点，重叠。解决此问题的一种方法是在.uvod和h1标记周围使用单个包裹展开ul。并将flex-flow:column添加到容器中。

更简单的方法是根本不使用flex ..如果你不需要任何花哨的对齐和定位，只需保持简单的display: block。

看看我说过的修补程序的这个小提琴。（评论的代码是您的版本的修复，另一个是使用flex来替代摘要的替代方法。）

＆＃13;

 /*     .uvod {
       flex-flow: column;
       height: 100%;
       width: 100%;
       display: flex;
       position: fixed;
       align-items: center;
       justify-content: justify;
       font-family: "Helvetica", sans-serif;
       color: #F0F8FF;
       text-transform: uppercase;
       letter-spacing: 3px;
     }
      */
     body {
       font-family: "Helvetica", sans-serif;
     }
     
     .title {
       text-transform: uppercase;
       letter-spacing: 3px;
       text-align: center;
       /* color: #F0F8FF; */
     }
     
     .section {
       width: 100%:
       margin-bottom: 10px;
     }
     
     .summary-wrapper {
       display: flex;
       align-items: center;
       justify-content: center;
     }
     
     .summary {
       list-style: none;
       margin: 0;
       padding: 0;
       text-transform: uppercase;
       letter-spacing: 3px;
     }

＆＃13;

<!-- <div class="uvod">
  <h1>Name of the page</h1>
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="l">Introduction</a></li>
    <li><a href="">CV</a></li>
    <li><a href="">Galery</a></li>
    <li><a href="">My work</a></li>
    <li><a href="">Contact</a></li>
  </ul>
</div> -->

<!-- Alternative -->
<h1 class="title">Name of the page</h1>
<div class="section summary-wrapper">
  <ul class="summary">
    <li><a href="">Home</a></li>
    <li><a href="">Introduction</a></li>
    <li><a href="">CV</a></li>
    <li><a href="">Galery</a></li>
    <li><a href="">My work</a></li>
    <li><a href="">Contact</a></li>
  </ul>
</div>

＆＃13;

Answer 4

我为new class添加了<ul>。此示例不使用flex。 .uvod div有fixed position和top:50%;。现在需要的是设置negative top margin to center it。

要使.uvod div完全居中于垂直中间，您需要知道div的高度，然后给它一个负余顶half its height in px。

例如，如果.uvod div有height:400px，那么您会写margin-top:-200px;。

以下是代码，在底部运行代码段并使用相同的代码检查this working fiddle，以便您可以在更大的背景上进行测试：

＆＃13;

.uvod
{
  position: fixed;
  top:50%;
  margin-top:-50.5px;
  width: 100%;
  display: block;
  text-align: center;
  font-family: "Helvetica", sans-serif;
  color: #F0F8FF;
  text-transform: uppercase;
  letter-spacing: 3px;
}

h1
{
  position:relative;
  float:left;
  width:100%;
  display:block;
  text-align:center;
}

.uvodUL
{
  position:relative;
  margin:0 auto;
  display:inline-block;
  list-style-type:none;
}

.uvodUL li
{
  position:relative;
  float:left;
  margin-right:5px;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
<div class="uvod">
 <h1>Name of the page</h1>
 <ul class="uvodUL">
   <li><a href="">Home</a></li>
   <li><a href="l">Introduction</a></li>
   <li><a href="">CV</a></li>
   <li><a href="">Galery</a></li>
   <li><a href="">My work</a></li>
   <li><a href="">Contact</a></li>
 </ul>
</div>
</body>

</html>

＆＃13;

注意：如果您事先不知道高度，那么您可以使用percentages %（父级高度的百分比 - 在这种情况下是文档正文的高度）。如果您需要调整值，可以使用media queries更改different resolutions。

Answer 5

你可以在css中使用flex-direction：'column'

并将class =“uvod”应用于两个div而不是ul：

这样的事情：

<div class="uvod">
 <h1>Name of the page</h1>
 </div>
 <div class="uvod">
  <ul >
   <li><a href="">Home</a></li>
   <li><a href="l">Introduction</a></li>
   <li><a href="">CV</a></li>
   <li><a href="">Galery</a></li>
   <li><a href="">My work</a></li>
   <li><a href="">Contact</a></li>
 </ul>
</div>

文本是彼此相邻的，而不是两行CSS / HTML

5 个答案: