我试图把一个标志在左上角，和文字平行的标志（顶部中心）。 无论徽标是什么，文本都应该与页面两侧有相同的距离。
我尝试添加“display:table；display:table-cell；position:relative；position:absolute 但我能得到的最好的是文本居中，但不是在同一行的标志，但有点低。
HTML:
<header class="header">
<div class="logo">
<img src="logo.gif" alt="a logo">
</div>
<div class="header-text">
Some text that is supposed to be centered in viewport
</div>
</header>
CSS:
.header {
border: 2px solid black;
width: 100%;
}
.logo img {
width: 80px;
}
.header-text {
text-align: center;
}
示例图像:
您可以使用position:absolute；，我已经将位置添加到标题中，并为其提供了一个与图像一起的包装器，以便您可以将它们一起移动。
我还添加了一些边距，以显示标题保持居中
null
.header {
border: 2px solid black;
width: 100%;
position: relative;
}
.wrapper {
width: 100%;
position: relative;
margin: 30px 0;
}
.logo {
display: flex;
}
.logo img {
width: 80px;
}
.header-text {
text-align: center;
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
}<header class="header">
<div class="wrapper">
<div class="logo">
<img src="https://via.placeholder.com/150" alt="a logo">
</div>
<div class="header-text">
Some text that is supposed to be centered in viewport
</div>
</div>
</header>
有许多方法去做这件事； 我在这里描述一个。
基本上，你需要把徽标从布局流中弄出来，这样文本就可以居中，而不受其影响。 最简单的方法是在徽标中添加position:absolute。
因此，完整的示例如下所示:
.header {
/* Allows the logo to be positioned relative to the header */
position: relative;
/* Centers the text — can be done other ways too */
text-align: center;
}
.header .logo {
position: absolute;
left: 0;
}
JSFiddle示例:https://JSFiddle.net/g01z27tv/
使用Flexbox！
null
.header {
border: 2px solid black;
width: 100%;
display:flex;
justify-content:space-between;
}
img ,#spacer{
width: 80px;
}
.header-text {
text-align: center;
}<header class="header">
<img src="https://via.placeholder.com/150" alt="a logo">
<div class="header-text">
Some text that is supposed to be centered in viewport
</div>
<div id='spacer'></div>
</header>