Question

如何将文字定位在红线所在的位置？填充不会出于某种原因，谢谢！ IMAGE 1 HERE

我尝试填充，因为我说不起作用，看起来很奇怪..我想我有一些奇怪的代码会产生错误，也许是因为div类文本在另一个div内？我不知道

HTML：

var app = angular.module('angularjs-starter', []);

  app.controller('MainCtrl', function($scope) {

  $scope.choices = [{id: 'choice1'}, {id: 'choice2'}];

  $scope.addNewChoice = function() {
    var newItemNo = $scope.choices.length+1;
    $scope.choices.push({'id':'choice'+newItemNo});
  };

  $scope.removeChoice = function() {
    var lastItem = $scope.choices.length-1;
    $scope.choices.splice(lastItem);
  };

});

CSS：

<!-- 
Landing page
-->
<link href="https://fonts.googleapis.com/css?family=Roboto"rel="stylesheet">
<header>
  biography
</header>
<div class="hero">
   <div class="title">
     Lorem ipsum dolor si amet.
  </div>
</div>

Answer 1

css语法错误padding: px 20px类名称添加.title

.title{
 padding: 10px 20px;
 display:table-cell;
 vertical-align:middle;
 font-size: 19px;
}

Answer 2

title是一个类，因此css选择器将以。并正确填充语法。

.title{
  padding: 40px;
 display:table-cell;
 vertical-align:middle;
 font-size: 19px;
}

.hero{
 background-color:#5FCF80;
  height: 80vh;
  top: 0;
  margin: 0;
}
body{
  margin: 0;
  /*
  font-family: 'Varela Round', sans-serif;
  */
   font-family: 'Roboto', sans-serif;

}
header{
  display: block;
  padding: 20px;
  background-color: white;
  width: 100%;
  top: 0;
}
.title{
padding: 40px;
display:table-cell;
vertical-align:middle;
font-size: 19px;
}

Landing page
-->
<link href="https://fonts.googleapis.com/css?family=Roboto"rel="stylesheet">
<header>
  biography
</header>
<div class="hero">
   <div class="title">
     Lorem ipsum dolor si amet.
  </div>
</div>

Answer 3

您需要设置.title的高度以使文字垂直居中。

.hero{
  background-color:#5FCF80;
  height: 80vh;
  top: 0;
  margin: 0;
}
body{
  margin: 0;
  font-family: 'Roboto', sans-serif;
}
header{
  display: block;
  padding: 20px;
  background-color: white;
  width: 100%;
  top: 0;
}
.title{
  padding: 0 20px;
  height: 80vh;
  display:table-cell;
  vertical-align: middle;
  font-size: 19px;
}

<!-- 
Landing page
-->
<link href="https://fonts.googleapis.com/css?family=Roboto"rel="stylesheet">
<header>
  biography
</header>
<div class="hero">
   <div class="title">
     Lorem ipsum dolor si amet.
  </div>
</div>

以下是另一个解决方案，.hero设置为table-cell，因此.title的定义属性较少。

.hero{
  background-color:#5FCF80;
  height: 80vh;
  width: 100vw;
  display:table-cell;
  vertical-align: middle;
  margin: 0;
}
body{
  margin: 0;
  font-family: 'Roboto', sans-serif;
}
header{
  display: block;
  padding: 20px;
  background-color: white;
  width: 100%;
  top: 0;
}
.title{
  padding: 20px;
  font-size: 19px;
}

<!-- 
Landing page
-->
<link href="https://fonts.googleapis.com/css?family=Roboto"rel="stylesheet">
<header>
  biography
</header>
<div class="hero">
   <div class="title">
     Lorem ipsum dolor si amet.
  </div>
</div>

Answer 4

这是一个更完美的解决方案。

.hero{
  position:relative;
  background-color:#5FCF80;
  height: 80vh;
  display:block;
}
.hero .title{
  position:absolute;
  top:50%;
  left:50%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
 }

如何在英雄课中定位我的文字

4 个答案: