如何使用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;，则标题会在屏幕上居中。那么保留标题位置的代码是什么？

BTW，这是我的网站http://bit.ly/1cuTmtE。

更新

任何人都可以访问我的网站并使用chrome或firefox的“inspect element”吗？

这是我的标题部分的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，但max-width将其限制为897px，但较少 可能< / strong>， less 将用于手机或调整浏览器窗口大小。

Answer 2

float: left;

在这里阅读：

http://www.w3schools.com/css/css_float.asp

Answer 3

尝试使用float属性：float:left;

Answer 4

您应该使用媒体查询根据分辨率更改容器的宽度。顺便说一下。问题是 margin：0 auto 意味着：“获取我当前的宽度并将我放在中心，左右边距相等。所以，如果你想使用margin，那么你需要媒体查询动态改变容器的宽度。

Answer 5

属性text-align: left将适用于此，但在问题或小提琴的更多细节后仍然会清楚