如何垂直居中这个跨度等于H1

Question

我得到了这一步：

Jsfiddle

我怎样才能改变跨度的CSS所以它的垂直居中的h1在它的左边？

希望它不复杂！

Answer 1

最好的办法是使用Flex样式。

1. 删除所有样式 '.title伪我'， '.title伪跨度'，” .title伪H1'
2. 编辑标题如下：

Flex的字幕样式：

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

justify-content：center; - 这将重新对齐H1，短划线和中间跨度。

align-items：center; - 这给你的垂直对齐。

Answer 2

在h1和span周围添加一个包装，然后将其设置为inline-flex。包装将由于标题为text-align而居中。

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

将此代码添加到.title

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

而且，我从h1删除margin: 65px auto所以它不会把所有的地方在柔性容器。

/* 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>