Question

我的头衔不是中心。你可以看到副标题是好的，但标题更左边。我怎样才能解决这个问题？网站链接：http://st358373.cmd16c.cmi.hanze.nl/portfolio.html

HTML：

<div class="titel">Portfolio</div>
<div class="subtitel">Hier is een selectie van recentelijk werk.</div>

CSS：

.titel {
  font-family: Raleway;
  font-size:   52px;
  color:       #3b3d40;
  text-align:  center;
  font-weight: 700;
  margin-top:  20px;
  display:     block;
}

.subtitel {
    font-family:   Adobe Caslon Pro;
    font-size:     18px;
    text-align:    center;
    margin-top:    40px;
    margin-bottom: 50px;
}

Answer 1

您网站的问题在于您的社交图标浮动到右侧。因此，您需要做的是清除标题容器。为此，您只需为clear: right;

添加.titel即可

供参考，请查看MDN documentation on the clear property

Answer 2

＆＃13;

.titel {
  font-family: Raleway;
  font-size: 52px;
  color: #3b3d40;
}

.subtitel {
  font-family: Adobe Caslon Pro;
  font-size: 18px;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */ 
  text-align:    center;  
}

＆＃13;

<body>
  <div class="center">
    <div class="titel">Portfolio</div>
    <div class="subtitel">Hier is een selectie van recentelijk werk.</div>  
  </div>
</body>

＆＃13;

Answer 3

基本上，这应该按预期工作，请看一下片段：

.titel {
   font-family: Raleway;
   font-size: 52px;
   color: #3b3d40;
   text-align: center;
   font-weight: 700;
   margin-top: 20px;
   display: block;
}

.subtitel {
   font-family: Adobe Caslon Pro;
   font-size: 18px;
   text-align: center;
   margin-top: 40px;
   margin-bottom: 50px;
}

<div class="titel">Portfolio</div>
<div class="subtitel">Hier is een selectie van recentelijk werk.</div>

您还可以尝试按以下方式设置.titel：

display: inline-block;
width: 100%;

另一种方法是在div <div style="clear:both"></div>下添加.social。

标题不会成为中心

3 个答案: