标题不会居中答案

【问题标题】：Title won't center标题不会居中
【发布时间】：2017-05-31 17:26:39
【问题描述】：

我的标题不会居中。如您所见，副标题还可以，但标题偏左。我怎样才能解决这个问题？网址链接：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;
}

【问题讨论】：

你的社交媒体图标正在推动它。
您的代码在没有社交图标容器的情况下运行正确，刚刚经过测试

标签： html css

【解决方案1】：

基本上，这应该可以按预期工作，看看 sn-p：

.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 .social下添加<div style="clear:both"></div>。

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

.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;  
}

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

【讨论】：