Comment centrer verticalement cette période égale à h1

Question

Je l'ai jusqu'ici:

Jsfiddle

Comment puis-je changer le css de la travée il est donc centré verticalement à la h1 à gauche de celui-ci?

J'espère que ce n'est pas compliqué!

Answer 1

Votre meilleur pari utilise des styles Flex.

1. Supprimer tous les styles pour '.title i', 'durée .title', titre » .title h1'
2. Modifier comme ci-dessous:

Flex style de titre:

.title { 
    width: 100%; 
    margin: 30px auto; 
    text-align: center; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 

justify-content: centre; - Cela aligne votre H1, tiret et span au milieu.

align-items: center; - Cela vous donne cet alignement vertical.

Answer 2

Ajoutez un wrapper autour de h1 et span, puis définissez-le comme inline-flex. Le wrapper sera centré en raison du text-align avec le titre.

Fiddle

.title { 
 
    width: 100%; 
 
    margin: 30px auto; 
 
    text-align: center; 
 
} 
 

 
.wrapper { 
 
    display: inline-flex; 
 
    justify-content: flex-start; 
 
    align-items: center; 
 
} 
 

 
.title i { 
 
    color: var(--grey-500); 
 
} 
 

 
.title span { 
 
    font-size: var(--caption); 
 
    line-height: 40px; 
 
    color: #9E9E9E; 
 
} 
 

 
.title h1 { 
 
    color: var(--black); 
 
    font-size: var(--h1); 
 
    text-align: center; 
 
    font-weight: 500; 
 
    margin: 65px auto; 
 
}

<div class="title"> 
 
    <div class="wrapper"> 
 
    <h1>Title 1</h1> <i class="material-icons separateTitleType">remove</i> <span>Page</span> 
 
    </div> 
 
</div>

Answer 3

Ajoutez ce code à .title

display: flex; 
justify-content:center; 
align-items:center; 

En outre, j'ai enlevé margin: 65px auto de h1 il ne prendrait pas toute la place dans le conteneur flexible .

/* Titles */ 
 
.title { 
 
    width: 100%; 
 
    margin: 30px auto; 
 
    text-align: center; 
 
    display: flex; 
 
    justify-content:center; 
 
    align-items:center; 
 
} 
 
.title i { 
 
    color: var(--grey-500); 
 
} 
 
.title span { 
 
    font-size: var(--caption); 
 
    line-height: 40px; 
 
    color: #9E9E9E; 
 
} 
 
.title h1 { 
 
    color: var(--black); 
 
    font-size: var(--h1); 
 
    text-align: center; 
 
    font-weight: 500; 
 
} 
 
:root { 
 
    --black: #000000; 
 
    --h1: 2.125em; 
 
    --caption: 0.875em; 
 
    --grey-500: #9E9E9E; 
 
} 
 
/* fallback */ 
 
@font-face { 
 
    font-family: 'Material Icons'; 
 
    font-style: normal; 
 
    font-weight: 400; 
 
    src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'); 
 
} 
 

 
.material-icons { 
 
    font-family: 'Material Icons'; 
 
    font-weight: normal; 
 
    font-style: normal; 
 
    font-size: 24px; 
 
    line-height: 1; 
 
    letter-spacing: normal; 
 
    text-transform: none; 
 
    display: inline-block; 
 
    white-space: nowrap; 
 
    word-wrap: normal; 
 
    direction: ltr; 
 
    -webkit-font-feature-settings: 'liga'; 
 
    -webkit-font-smoothing: antialiased; 
 
} 
 
body { 
 
    font-family: 'Roboto', sans-serif; 
 
    background-color: #fff; 
 
}

<div class="title"> 
 
    <h1>Title 1</h1> <i class="material-icons separateTitleType">remove</i> <span>Page</span> 
 
</div>