Question

有点像母马的东西应该很简单。基本上我想要一个由图像和下面的一些文本组成的元素，它们都是垂直和水平居中的。我需要这个在所有设备上保持一致，作为一种欢迎屏幕，也许使用百分比？

在我的代码下面是下一个元素，它是一些导航标签，但是我的代码目前的问题是它导致内容重叠，因此寻找一些指导。我不能在代码中放置固定的高度，因为视口会有所不同。

非常感谢任何对此的帮助，谢谢你们。

HTML

<header class="header-content text-center">
    <img src="assets/img/sample.png"/>
    <h1>some text</h1>
    <h2>here is some more text that I am working on blah</h2>
  </header>

  <section class="container">
    <ul class="nav nav-tabs nav-justified">
      <li data-toggle="tab" class="active"><a href="#home">Test</a></li>
      <li><a data-toggle="tab" href="#menu1">test1</a></li>
      <li><a data-toggle="tab" href="#menu2">test2</a></li>
      <li><a data-toggle="tab" href="#menu3">test3</a></li>
    </ul>

    <div class="tab-content">
      <div id="home" class="tab-pane fade in active">
        <h3>test</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
      <div id="menu1" class="tab-pane fade">
        <h3>test1</h3>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <div id="menu2" class="tab-pane fade">
        <h3>test2</h3>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
      </div>
      <div id="menu3" class="tab-pane fade">
        <h3>test3</h3>
        <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
      </div>
    </div>
  </section>

CSS

header.header-content{
    color:#fff; 
    margin: auto; 
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}

Answer 1

您可以随时使用断点。基本上，它的工作原理如下：

@media screen and (max-width: 1000px) {
    /* Fill with styling rules */
}

@media用于为不同的设备，屏幕宽度等定义不同的规则。

screen是不言自明的。

(max-width: 1000px)表示1000像素以下的任何内容都会将这些样式规则应用于它们。另一种方法是使用min-width，这恰恰相反。

在没有重叠内容的所有设备上垂直居中标题图像

1 个答案: