Question

我有点担心这个小问题会破坏我的布局。在主页上，我有一个蓝色的盒子作为我的主要容器。在我的主容器内，还有两个盒子位于屏幕右侧，其中包含联系信息。在标题容器内还有一个H2表示 - ＆＃34;满意度是我们最强的点＆＃34;

那有什么不对？好吧，没什么好看的，但是如果想要准确地将H2放在中心怎么办？满意度是我们最强的点＃34;在它的标题容器内，这是浅蓝色的大矩形。所以我编写这个CSS来尝试准确地将文本置于标题容器

中

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

屏住呼吸，然后撞到了...... 我的整个布局都打破了......我之所以这么想是因为H2的父母问题。在我的HTML中，我正在插入h2类，对于大8列的div类，在这种情况下，它不是正确的父级（将文本置于其中。）我要将文本居中的元素是标题容器（淡蓝色盒子）。简单地说 - 一旦我将h2的父级更改为标题容器并添加上面的样式，我的布局似乎就会破坏。

这是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/

Thax阅读，我期待着您的建议和评论。

Answer 1

为div.columns的容器（h2）设置固定高度可修复此问题。

示例

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

Answer 2

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

Answer 3

尝试使用h1元素

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

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

3 个答案: