html - 如何使用 CSS 左对齐标题

Question

我正在使用 Thesis 2 在我的网站上开发一个主题。我刚刚修改了经典的响应式主题。

我使用名为“header-middle-sub”的 div 标签创建了一个 id。这是我使用的代码:

#header-middle-sub {
    background-color: #6699CC;
    display: table;
    margin: 0 auto;
    width: 897px;
}

它在使用桌面的浏览器上运行良好。但由于是响应式主题，当我在平板或手机上打开网站时，宽度占用固定的897px。

如果我删除此行 width: 897px; 标题将在屏幕上居中。那么保留标题位置的代码是什么呢？

顺便说一句，这是我的网站http://bit.ly/1cuTmtE .

更新:

任何人都可以访问我的网站并使用 chrome 或 firefox 的“检查元素”吗？

这是我的页眉部分的 CSS:

.header {
    margin: 0 auto;
    padding: 0px;
    background-color: #C4C4C4;
}

#header-top {
    background-color: #7ED7F2;
}

#header-middle {
    background-color: #6699CC;
    border-bottom: 5px solid #0f3158;
    border-top: 2px solid #0F3158;
    padding: 20px 0 20px 0;
}

#header-middle-sub {
    background-color: #6699CC;
    display: table;
    margin: 0 auto;
    width: 897px;
}

#header-bottom {
    background-color: #0099CC;
}

#header-container {
    display: table;
    margin: 0 auto;
}

这是我使用论文 2 的主题布局。

Answer 1

它也不适用于桌面!让你的浏览器窗口非常小，你会看到水平滚动条。宽度始终固定。

要避免这种行为，请使用以下 css 代码:

#header-middle-sub {
    background-color: #6699CC;
    display: table;
    margin: 0 auto;
    max-width: 897px;
    width: 100%;
}

现在，它将始终尝试将 div 拉伸(stretch)到整个浏览器窗口，但 max-width 将其限制为 897px，但更少 是可能的，less 将在手机上或当您调整浏览器窗口大小时使用。