CSS 居中文本 - Canvas Wootheme

Question

我正在使用 Woothemes 的 Wordpress 主题 Canvas 。我试图将网站描述文本置于 Logo 下方。这是网站:http://barkhascustomsourcing.com

这是我当前使用的 CSS。它没有响应，我知道，但我需要重写它。

#logo .site-description {
    display: inline-block !important;
    line-height: 25px;
    margin-left: -330px;
    padding-bottom: 20px;
    padding-top: 20px;
    text-align: center;
    width: 1000px;
}

有什么建议吗？

Answer 1

要使其正确响应，您需要做的不仅仅是调整此类。以下是如何为标题部分实现它:

#logo { width: 100%; }
#logo > a {
    width: 100%;
    max-width: 350px;
    margin: 0px auto;
    display: block;
}
#logo > span.site-description {
    width: 100%;
    max-width: 1000px;
    margin: 0px auto;
    display: block !important;
}

通过使外框和内框遵循全宽但使用 max-width 约束它们将使它们响应。

现在，这只是您网站的一小部分。我并没有在这里为你做全部事情，但你得到了一般要点。它还要求您查看几乎所有元素，因为调整大小将要求您制作占据自然的元素；高度并随着宽度的减小而扩展。所以实际上，您不能在任何地方使用任何基于像素的widths 或heights，只能使用max-widths 和最大高度。

PS:下次提问的时候，请把你自己试过的说出来。向我们表明您没有将您的工作外包给我们:)