Question

我在定位<h1>和<p>方面存在严重问题。我目前正在使用absolute定位，但当我调整浏览器大小时，文字会移动，我不想要它。

我尝试了其他方法来设计它，但都不成功。

这是小提琴：

＆＃13;

billboard {
  width: 100%;
  height: 645px;
  position: relative;
  background-image: url("../images/billboard.png");
  background-repeat: no-repeat;
  background-size: contain;
}

.billboard h1 {
  color: #fff;
  font-family: WCManoNegraBta;
  font-size: 100px;
  line-height: 60px;
  letter-spacing: -4px;
  text-transform: capitalize;
  width: 100%;
  text-align: center;
  position: absolute;
  top: 250px;
}

.billboard p {
  color: #fff;
  font-family: Aleo, serif;
  font-size: 16px;
  letter-spacing: 1px;
  width: 100%;
  text-align: center;
  position: absolute;
  top: 325px;
  
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link rel="stylesheet" href="http://getbootstrap.com/assets/css/ie10-viewport-bug-workaround.css">    

    <!-- Custom styles for this template -->
    <link href="http://getbootstrap.com/examples/cover/cover.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->   
    <link rel="stylesheet" href="http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js"> 


<div class="billboard">
      <h1>resto</h1>
      <p>Where your taste meets our perfectionism</p>
 </div>

＆＃13;

Answer 1

您正在使用h1和p的绝对位置，这将把它们放在HTML页面上的特定位置（指定的顶部位置）。但是您已为两个元素指定了宽度100％并使用了文本对齐中心。这将使元素伸展到页面的整个宽度，并使元素内的文本居中对齐。现在，当您调整浏览器窗口大小时，它将移动文本。

解决您的问题的方法是，使用＆＃34; left＆＃34;而不是使用宽度100％，使用显示块并将元素放置在特定位置。＆＃34; top＆＃34; css属性。

这是更新的风格：

.billboard h1 {
    color: #fff;
    font-family: WCManoNegraBta;
    font-size: 100px;
    line-height: 60px;
    letter-spacing: -4px;
    text-transform: capitalize;
    /*width: 100%;*/ /* No need to specify width to 100% */
    text-align: center;
    position: absolute;
    top: 250px;
    left:300px; /* Added left position to set p tag at fixed location */
}

.billboard p {
    color: #fff;
    font-family: Aleo, serif;
    font-size: 16px;
    letter-spacing: 1px;
    /*width: 100%;*/ /* No need to specify width to 100% */
    white-space: nowrap; /* Nowrap property used so that line does not break/wrap, alternatively we can specify width of element. */
    text-align: center;
    position: absolute;
    top: 325px;
    left: 245px; /* Added left position to set p tag at fixed location */
}

标题和段落继续调整大小

1 个答案: