Question

我遇到这种情况，我左边有一个标题，右边有一些用户信息（如头像）。重要的是要明白，徽标的宽度和用户元素是不一样的！

所以，在标题的中间我有一个标题，如下所示：

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

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

我创建了一个DEMO

虽然如果调整区域大小（使用省略号），此标题会很有效，但标题不在屏幕/视口的中间。

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

更新：根据Hassan Ahmad所做的工作（见下文），我更新了DEMO。这正是我所需要的，但正如已经提到的，媒体查询使这个解决方案有点hacky。有没有媒体查询如何实现相同的任何建议？

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; } }

如何根据视口宽度（css3）居中标题

1 个答案: