html - 如何根据视口(viewport)宽度(css3)居中标题

Question

我有这样的情况，我有一个标题，左边是 Logo ，右边是一些用户信息(比如头像)。重要的是要了解 Logo 的宽度和用户元素的宽度是不一样的!

所以，在页眉的中间我有一个标题，像这样:

<header>
    <img class="logo" src="http://file.png">
    <div class="user"> </div> 

    <h1>This is the title</h1>
</header>

我创建了一个 DEMO

虽然如果您调整区域大小(使用省略号)这个标题效果很好，但是标题不在屏幕/视口(viewport)的中间。

所以问题是，考虑到调整大小时的行为，是否可以根据视口(viewport)宽度使标题居中？

更新:根据 Hassan Ahmad 所做的工作(见下文)，我更新了 DEMO .这正是我所需要的，但正如已经提到的，媒体查询使这个解决方案有点老套。有没有关于如何在没有媒体查询的情况下实现相同目标的建议？

Answer 1

这个 css 怎么样:

header {
    position: relative;
    height: 50px;
    background-color: lightgrey;
    text-align: center;
}

.logo {
    position: absolute; top: 0; left: 0;
    height: 50px;
    width: 300px;
}

.user {
    position: absolute; top: 0; right: 0;
    width: 50px;
    height: 50px;
    background-color: red;

}

编辑:

h1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 50px;
}

@media only screen and (max-width: 820px){
    .logo { position: static; float: left; }
}