Question

我正在创建一个具有视差背景的个人网站，它占据屏幕尺寸的100％，但是当我将屏幕尺寸更改为最小尺寸时，文字会从div中移出，我使用填充顶部百分比。我确实知道相当多的CSS，但我不想乱搞乱搞一切，我到处都看，但没有答案接近我的问题。基本上我只想纵向和横向居中我的内容，即使我调整屏幕大小。

这是我的CSS：

.wrapper {
    width: 100%;
    /* whatever width you want */
    display: inline-block;
    position: relative;
}
.wrapper:after {
    padding-top: 52.50%;
    /* 16:9 ratio */
    display: block;
    content: '';
}
.main {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    /* fill parent */
    background-image: url('/storage/images/background.jpeg');
    /* let's see it! */
    color: white;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.text {
    margin-top: 15%;
    text-align:center;
}

我的HTML：

<div class="row">
    <div class="wrapper">
        <div class="main">
            <div class=text>
                <img src="/storage/images/image.jpg" style="border-radius:100%; width:150px; height:auto;">
                <h1>My name</h1>
            </div>
        </div>
    </div>
</div>

Answer 1

使用：

.main {
  text-align: center;<-----------------------
  //More code..........
}

.text {
  max-width: 150px;
  text-align: center;
  display: inline-block;
  margin-top: 15%;
}

.text img {
  border-radius:100%;
  width:70%;
  height:auto;
}

.text h1 {
  margin: 0;
  padding: 0;
}

.wrapper {
  width: 100%;
  /* whatever width you want */
  display: inline-block;
  position: relative;
}
.wrapper:after {
  padding-top: 52.50%;
  /* 16:9 ratio */
  display: block;
  content: '';
}
.main {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  /* fill parent */
  background-image: url('http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg');
  /* let's see it! */
  color: white;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
}
.text {
  max-width: 150px;
  text-align: center;
  display: inline-block;
  margin-top: 15%;
}

.text img {
  border-radius:100%;
  width:70%;
  height:auto;
}

.text h1 {
  margin: 0;
  padding: 0;
}

<div class="row">
    <div class="wrapper">
        <div class="main">
            <div class=text>
                <img src="http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg">
                <h1>My name</h1>
            </div>
        </div>
    </div>
</div>

CSS中心内容在相对包装中

1 个答案: