Question

我正在尝试将我的所有网页内容垂直放在我的网站上。目前通过平板电脑/移动版本，文本的下半部分有很多空白空间，所以我希望所有内容都垂直居中。我遇到的问题是，当我使用变换'技巧'（它在我的媒体查询代码.about-content上）时，它排在页面中间而不是父div，.about-right。

我在这里做错了什么？在媒体查询中，在工作表底部附近找到了更适用的CSS。

问题我正试图解决（图片） - http://i988.photobucket.com/albums/af6/jtbitt/ipad-text_zpss35j9ty4.png

当我使用变换技巧（pic）时会发生这种情况 - http://i988.photobucket.com/albums/af6/jtbitt/ipad-text-middle-page_zps1srfn7bq.png

HTML -

<section id="about" ng-controller="aboutController">    
  <div class="container-fluid">

    <div class="row about-row">

      <div class="about-left col-xs-12 col-md-6">
      </div>

      <div class="about-right col-xs-12 col-md-6">
        <div class="about-content">
          <div class="about-content-title">
            <h1><strong>I'M JAY.</strong></h1>
          </div>

          <div class="about-content-info">
            <p ng-if="about.firstParagraph">An entrepenurial minded, Full Stack Developer. Whenever I'm up against a challenge that I care about, it gives me a rush. Focusing on the big picture is important to me, but I never forget the smaller details. Anything that is not challenging is boring, and makes me yawn. Anything that is seemingly impossible interests me a lot. I'm read to get to work.</p>

            <p ng-if="!about.firstParagraph">Currently seeking a Javascript position, using the MEAN stack, in New York City. Being innovative, ambitious, and hard working are values that are very important to me. I want to join a company that has similar values and has goals of reaching ridiculous levels of success, not just modest realistic ones. I love working with a solid team.</p>
          </div>

          <div class="about-button">
            <button ng-if="about.firstParagraph" class="label label-success" ng-click="about.switchParagraph()">MORE =></button>
            <button ng-if="!about.firstParagraph" class="label label-success"><a href="/portfolio">VIEW SKILLS</a></button>
          </div>

          <div class="about-personal-info">
            <h4>Email: jaybittner@gmail.com</h4>
          </div>

          <div class="about-icon">
            <a href="{{ profile.url }}" ng-repeat="profile in about.profiles"><img ng-src="{{ profile.icon }}" /></a>
          </div>
        </div>

      </div>

    </div>

  </div>
</section>

CSS -

#about {
  height: 100%; 
  width: 100%;
  background: rgba(0,97,65,1);
  background: -moz-linear-gradient(left, rgba(0,97,65,1) 0%, rgba(54,135,95,1) 7%, rgba(36,123,85,1) 22%, rgba(0,97,65,1) 53%, rgba(34,121,84,1) 76%, rgba(54,135,95,1) 90%, rgba(54,135,95,1) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,97,65,1)), color-stop(7%, rgba(54,135,95,1)), color-stop(22%, rgba(36,123,85,1)), color-stop(53%, rgba(0,97,65,1)), color-stop(76%, rgba(34,121,84,1)), color-stop(90%, rgba(54,135,95,1)), color-stop(100%, rgba(54,135,95,1)));
  background: -webkit-linear-gradient(left, rgba(0,97,65,1) 0%, rgba(54,135,95,1) 7%, rgba(36,123,85,1) 22%, rgba(0,97,65,1) 53%, rgba(34,121,84,1) 76%, rgba(54,135,95,1) 90%, rgba(54,135,95,1) 100%);
  background: -o-linear-gradient(left, rgba(0,97,65,1) 0%, rgba(54,135,95,1) 7%, rgba(36,123,85,1) 22%, rgba(0,97,65,1) 53%, rgba(34,121,84,1) 76%, rgba(54,135,95,1) 90%, rgba(54,135,95,1) 100%);
  background: -ms-linear-gradient(left, rgba(0,97,65,1) 0%, rgba(54,135,95,1) 7%, rgba(36,123,85,1) 22%, rgba(0,97,65,1) 53%, rgba(34,121,84,1) 76%, rgba(54,135,95,1) 90%, rgba(54,135,95,1) 100%);
  background: linear-gradient(to right, rgba(0,97,65,1) 0%, rgba(54,135,95,1) 7%, rgba(36,123,85,1) 22%, rgba(0,97,65,1) 53%, rgba(34,121,84,1) 76%, rgba(54,135,95,1) 90%, rgba(54,135,95,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006141', endColorstr='#36875f', GradientType=1 );
  background-repeat: no-repeat;
  color: #101010;
  border-bottom: 3px solid black;
}

#about .container-fluid, #about .row {
  height: 100%;
}

.about-left {
  height: 100%;
  background-image: url('../../images/jay-ocean.jpg'); 
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border-right: 3px solid #101010;
}

.about-right {
  padding-top: 24vh;
  text-align: center;
}

.about-content {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

.about-content-title h1{
  font-size: 3.1vw;
  margin-bottom: 0.6vh;
}

.about-content-info p {
  font-size: 1vw;
  word-spacing: 0.3vw;
  margin-bottom: 0.7vh;
}

.about-button button {
  margin-bottom: -0.1vh;
}

.about-personal-info h4 {
  margin-bottom: 0.7vh;
}

.about-button button {
  color: gray;
  border: 1px solid #101010;
  background-color: #101010;
  font-size: 0.7vw;
}

.about-button a {
  color: gray;
}

.about-personal-info h4 {
  font-size: 1vw;
  word-spacing: 0.3vw;
}

.about-icon img {
  height: 3.5vh;
  width: 1.75vw;
  border-radius: 10px;
  border: 1px solid #101010;
  margin: 3px;
}

@media only screen and (max-width: 992px) {
  .about-left {
    height: 50%;
    border-bottom: 3px solid black;
  }

  .about-right {
    padding-top: 0;
  }

  .about-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%; 
  }

  .about-content-title h1 {
    font-size: 5vw;
  }

  .about-content-info p {
    font-size: 2.5vw;
  }

  .about-button button {
    font-size: 2.5vw;
  }

  .about-personal-info h4 {
    font-size: 2.5vw;
  }

  .about-icon img {
    height: 3vh;
    width: 3vw;
  }
}

Answer 1

问题是您在position:fixed课程中使用.about-content。这会使您的内容相对于浏览器窗口对齐，而不是相对于它的父级。因此，如果您的页面可以滚动，那么该文本将保持固定在浏览器屏幕的中间。

要解决此问题，请将您的.about-content课程更改为使用position: absolute。而且你还需要在你希望它相对设置的父元素上设置position: relative，因为position:absolute元素将相对于它最接近的位置祖先定位自己。

有关各种职位值的说明，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/position?redirectlocale=en-US&redirectslug=CSS%2Fposition。

Answer 2

您需要为父级和子级div指定明确的位置，以确保预期的垂直对齐效果。只需按照以下步骤更换您的CSS。

.about-right {
  position: relative; // added this line
  padding-top: 24vh;
  text-align: center;
}

.about-content {
  position: absolute; // added this line
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

...
@media only screen and (max-width: 992px) {
  ...

  .about-right {
    position: relative; // added this line
    padding-top: 0;
  }

  .about-content {
    position: absolute; // added this line
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%; 
  }
  ...
}

Answer 3

你正在思考这个...但你当前的CSS的问题是：

如上所述，固定位置相对于视口。变换将元素从其位置移开。

更优雅的解决方案是使用inline-block定位div，这是我认为您首先想要实现的text-align: center

js fiddle：http://jsfiddle.net/eufqy08o/1/

    .about-left {
      min-height: 35vw;
      min-width: 100%;
      background-image: url('http://herbadmother.com/wp-content/themes/thesis_18/custom/rotator/sample-1.jpg'); 
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
      border-right: 3px solid #101010;
    }

    .about-right {
      text-align: center;
    }

    .about-content {
      width: 50%;
      display: inline-block;
    }

     /*in your media query dont set position!!*/
    .about-content {

    }

为什么我的div垂直居中在页面内而不是它的父div？

3 个答案: