由于可能的育儿问题导致布局中断？答案

【问题标题】：Layout breaking due to possible parenting issue?由于可能的育儿问题导致布局中断？
【发布时间】：2015-01-07 20:04:42
【问题描述】：

我有点被这个破坏我布局的小问题所困扰。在主页上，我有一个蓝色框，用作我的主要容器。在我的主容器中，屏幕右侧还有两个包含联系信息的框。在标题容器中还有一个 H2，上面写着——“满意是我们的强项”

那怎么了？好吧，atm 看起来没什么问题，但是如果想将 H2“满意度是我们的强项”准确地居中在它的标题容器中，它是浅蓝色的大矩形。所以我写了这个 CSS 来尝试准确地将标题容器中的文本居中

%align {
position: relative;
top: 50%;
-webkit-transform:translateY(-50%);
-ms-transform:translateY(-50%);
transform:translateY(-50%);
}

屏住呼吸，砰砰砰…… 我的整个布局都坏了……我在想这是由于 H2 的育儿问题。在我的 HTML 中，我在大 8 列的 div 类下面插入了 h2 类，在这种情况下，它不是正确的父级（将文本居中）。我想要将文本居中的元素是 header-container （浅蓝色框）。简单地说——一旦我将 h2 的父级更改为 header-container 并添加上面的样式，我的布局似乎就会中断。

这里是 HTML

<div class="headline-container">
        <div class="row">
            <div class="large-8 columns">
        <h2 class="satisfaction">Satisfaction is,</br>Our Strongest Point</h2>
            </div>

            <div id="contact-info" class="large-4 columns">
                <div class="phone-box">
                    <div class="number">
                        <a id="phone-number" href="tel:808-848-8821">808-848-8821</a>
                    </div>
                </div>

                <div class="email">
                    <div class="email-box"><a id="email-contact" href="mailto:etoile@hawaii.rr.com">etoile@hawaii.rr.com</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

通过将此填充应用于文本，我使用了一种临时不太准确的方法来使 H2 居中。它看起来不错，但内心深处告诉我它不是 100% 准确的，这让我很困扰..关于我的布局为什么会破坏的任何建议？

padding-top: 40px;

这是链接 http://kapena.github.io/pp_web/

感谢您的阅读，我期待您的建议和 cmets。

【问题讨论】：

标签： css html sass zurb-foundation

【解决方案1】：

为 h2 的容器 (div.columns) 设置固定高度可解决此问题。

示例

<div class="large-8 columns">
    <h2 class="satisfaction">Satisfaction is,</br>Our Strongest Point</h2>
</div>

CSS

.columns {
    height: 218px;
}

.satisfaction {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

【讨论】：

萨克斯科林！你解决了这个问题！ :)

【解决方案2】：

您可以只使用 h2{text-align: center} 或不使用 .row{display: block; position: relative; margin: 0 auto; width: 100%;} 您不需要翻译

【讨论】：

【解决方案3】：

对 h1 元素试试这个

h2{
  display:inline-block;
  margin: 0 auto;
  }

【讨论】：