2017-01-16 3 views
0

Мои названия не будут центрироваться. Поскольку вы можете видеть, что субтитры в порядке, но заголовок намного больше слева. Как я могу это исправить? Ссылка сайта: 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; 
} 
+0

Ваши иконки социальных медиа толкают его. –

+0

ваш код работает корректно без контейнера социальных значков, только что протестирован – SergioAMG

ответ

3

Проблема с вашим сайтом заключается в том, что ваши социальные иконки перемещаются вправо. Поэтому вам нужно очистить контейнер заголовка. Для этого, все, что вам нужно сделать, это добавить clear: right; для вашего .titel

Для справки, проверьте MDN documentation on the clear property

-1

В принципе, это должно работать, как и следовало ожидать, взгляните на фрагмент кода:

.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 style="clear:both"></div> под DIV .social.

0

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

Смежные вопросы