摆脱这个边距和垂直高度和对齐

时间:2016-02-03 08:22:09

标签: html css responsive-design responsive-images

我正在尝试为我建立一个网站,但我遇到了一些问题。

这就是我想要实现的目标:

Photoshop image

这就是我到目前为止所拥有的

Actual image

以下是我目前面临的问题:

  1. 我无法摆脱导航栏下方的空白区域,我删除了导航栏和窗口其余部分的边距和填充,但它不起作用。

  2. 我无法像第一张图片一样在中间垂直对齐文字。我尝试使用行高和填充但是当我垂直调整浏览器窗口大小时,文本不响应大小。 无论浏览器窗口的大小如何,我希望它保持在中间位置。

  3. 使背景图像适合窗口大小的最佳方法是什么?目前我正在使用

    宽度:100%; 高度:100vh; 背景图像:URL( “图像/ background.jpg”); background-size:100%100%;

  4. 但我觉得这不是最好的方法

    到目前为止,这是我的文件:

    #navigation ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #272727;
      border-top: 2px solid #5e20d1;
      text-align: center;
    }
    #navigation a {
      display: inline-block;
      color: #747272;
      text-align: center;
      padding-top: 15px;
      padding-bottom: 15px;
      padding-right: 15px;
      padding-left: 15px;
      margin: 0;
      text-decoration: none;
    }
    #navigation li {
      display: inline;
      margin: auto;
    }
    #navigation a:hover {
      color: white;
    }
    #jumbo {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 90vh;
      background-image: url("http://i.imgur.com/D1cF3ZG.jpg");
      background-size: 100% 100%;
    }
    #jumbo li {
      display: inline;
      margin: 1%;
      color: white;
      font-size: 20px;
    }
    #jumbo h1 {
      color: white;
      font-size: 30px;
    }
    <div id="navigation">
      <ul>
        <li><a href="#">About</a>
        </li>
        <li><a href="#">Skills</a>
        </li>
        <li><a href="#">Projects</a>
        </li>
        <li><a href="#">Contact</a>
        </li>
      </ul>
    </div>
    
    <div id="jumbo">
      <h1>Responsive Front-end Developer</h1>
      <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JAVASCRIPT</li>
        <li>JQUERY</li>
        <li>WORDPRESS</li>
      </ul>
    </div>

    如果有人可以帮助我解决所有这些问题,我将非常感激

6 个答案:

答案 0 :(得分:1)

1)您必须将padding-top: 1px;添加到#jumbo或从h1中删除margin-top。

2)使用包装器对齐文本。然后将top:50%; transform:translate(0, -50%);应用于它

3)#jumbo {background-size:cover; }

#navigation ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #272727;
  border-top: 2px solid #5e20d1;
  text-align: center;
}
#navigation a {
  display: inline-block;
  color: #747272;
  text-align: center;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-right: 15px;
  padding-left: 15px;
  margin: 0;
  text-decoration: none;
}
#navigation li {
  display: inline;
  margin: auto;
}
#navigation a:hover {
  color: white;
}
#jumbo {
	text-align:center;
  margin: 0;
  padding: 1px 0 0 0;
  width: 100%;
  height: 90vh;
  background-image: url("http://i.imgur.com/D1cF3ZG.jpg");
  background-size: cover;
}
#jumbo li {
  display: inline;
  margin: 1%;
  color: white;
  font-size: 20px;
}
#jumbo h1 {
  margin-top:0;
  color: white;
  font-size: 30px;
  /*background-color:rgba(0,0,0,.5);*/
}
.teaser {
	position:relative;
	/*background-color:rgba(0,0,0,.5);*/
	top:50%;
	transform:translate(0, -50%);
}
<div id="navigation">
  <ul>
    <li><a href="#">About</a>
    </li>
    <li><a href="#">Skills</a>
    </li>
    <li><a href="#">Projects</a>
    </li>
    <li><a href="#">Contact</a>
    </li>
  </ul>
</div>

<div id="jumbo">
<div class="teaser">
<h1>Responsive Front-end Developer</h1>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JAVASCRIPT</li>
    <li>JQUERY</li>
    <li>WORDPRESS</li>
  </ul>
</div>
  
</div>

答案 1 :(得分:0)

要删除不需要的边距和填充,只需在CSS顶部添加以下内容:

* {
    margin:0;
    padding:0;
}

这将删除 ALL 元素的边距,除非在*选择器下方另行声明。

JsFiddle *选择器

的示例

或者,您可以将margin-top:0;添加到#jumbo h1,以仅删除标题和内容之间的空白。

margin-top

JsFiddle example

希望这有帮助!

答案 2 :(得分:0)

1)空格只是h1的margin-top

2)使用flexbox

3)Perfect Full Page Background Image

答案 3 :(得分:0)

<强> 1。添加它以消除空白区域(它来自h1标签)。

* {
  margin:0;
  padding:0;
}

您可以通过右键单击h1标签并单击“检查”来查看。

<强> 2。在div中居中文本

有关详细信息,请参阅this answer

第3。完美的整页背景图片

CSS技巧对此有a great post

答案 4 :(得分:0)

正如您所提到的,这是您的问题的答案 默认情况下,1-H1标签的上边距和下边距都是保证金,因此H1标签的边距顶部导致问题摆脱它你必须删除它

#jumbo h1 {
   color: white;
   font-size: 30px;
   margin-top: 0;
   padding-top: 20px;

}

2-你必须将jumbtron的内容包装在新容器中,然后给jumbtron显示表和包装器显示表格单元格和垂直对齐中间;

 <div id="jumbo">
 <div class="wrapper">
 <h1>Responsive Front-end Developer</h1>
 <ul>
 <li>HTML</li>
 <li>CSS</li>
 <li>JAVASCRIPT</li>
 <li>JQUERY</li>
 <li>WORDPRESS</li>
</ul>
</div>

和CSS

#jumbo {
 display:table;
 }
#jumbo .wrapper{
   display: table-cell;
   vertical-align: middle;
   text-align: center;
}

这是一篇关于如何align vertically的完整文章 3-最好的方法是

 background-size: cover;
 height: 100%;

100vh并非在所有浏览器中都很常见

答案 5 :(得分:0)

  1. 你的身体可能有一些填充/边缘。因此,请将其设为零body{margin:0; padding:0}并应用#jumbo h1{margin: 0;}
  2. 2.apply #jumbo{text-align:center;position: relative;}。然后添加一个额外的div,如<div class='v-block'><h1>Responsive Front-end Developer</h1><ul><li>HTML</li><li>CSS</li><li>JAVASCRIPT</li><li>JQUERY</li><li>WORDPRESS</li></ul></div>,并添加像.v-block{height: 80px;position: absolute;width: 100%;top: 50%;margin-top: -40px;}

    这样的CSS
    1. background-size:cover;这样可以避免拉伸背景图像。
    2. 最终的代码在下面..

      body{
                      margin: 0;
                      padding: 0;
                  }
                  #navigation ul {
                      list-style-type: none;
                      margin: 0;
                      padding: 0;
                      overflow: hidden;
                      background-color: #272727;
                      border-top: 2px solid #5e20d1;
                      text-align: center;
                  }
                  #navigation a {
                      display: inline-block;
                      color: #747272;
                      text-align: center;
                      padding-top: 15px;
                      padding-bottom: 15px;
                      padding-right: 15px;
                      padding-left: 15px;
                      margin: 0;
                      text-decoration: none;
                  }
                  #navigation li {
                      display: inline;
                      margin: auto;
                  }
                  #navigation a:hover {
                      color: white;
                  }
                  #jumbo {
                      margin: 0;
                      padding: 0;
                      width: 100%;
                      height: 90vh;
                      background-image: url("http://i.imgur.com/D1cF3ZG.jpg");
                      background-size: 100% 100%;
                      text-align: center;
                      position: relative;
                      background-size: cover;
                  }
                  #jumbo li {
                      display: inline;
                      margin: 1%;
                      color: white;
                      font-size: 20px;
                  }
                  #jumbo h1 {
                      color: white;
                      font-size: 30px;
                      margin: 0;
                  }
                  .v-block{
                      height: 80px;
                      position: absolute;
                      width: 100%;
                      top: 50%;
                      margin-top: -40px;
                  }
      <div id="navigation">
                  <ul>
                      <li><a href="#">About</a>
                      </li>
                      <li><a href="#">Skills</a>
                      </li>
                      <li><a href="#">Projects</a>
                      </li>
                      <li><a href="#">Contact</a>
                      </li>
                  </ul>
              </div>
      
              <div id="jumbo">
                  <div class='v-block'>
                      <h1>Responsive Front-end Developer</h1>
                      <ul>
                          <li>HTML</li>
                          <li>CSS</li>
                          <li>JAVASCRIPT</li>
                          <li>JQUERY</li>
                          <li>WORDPRESS</li>
                      </ul>
                  </div>
              </div>