Html 用另一个元素推送一个元素

我有一个

标题

，下面是一个包含两个中等大小图像的容器，当我调整页面大小时，问题出现了，

标题

倾向于放在我的

按钮容器

下面，我希望它做的是让

标题

按下

按钮容器

jsfiddle:

通过将

按钮容器

->

转换：转换（-50%，-50%）

更改为

转换：转换（-50%，0%）

I某种程度上成功地使其工作，但在调整大小后，

按钮容器

元素被下压得太多，并且通过摆弄边距，我把它放在中间，但在纵向模式下，容器再次越过头部

/*标题*/
h1{
文本转换：大写；
宽度：100%；
字体大小：9vw；
文本对齐：居中；
边际上限：4vh；
边框：1px实心#000；
}
/*容器*/
#按钮容器{
填充：0；
保证金：0；
列表样式：无；
显示器：flex；
-webkit flex流：行换行；
证明内容：周围的空间；
边际上限：35vh；
左边距：50vw；
转换：翻译（-50%，-50%）；
宽度：90vw；
/*宽度：90vw；
高度：60vh*/
调整项目：基线；
背景：线性梯度（向右，透明0%，#fff 33%，#fff 66%，透明100%）；
边框：1px实心#000；
}
#按钮容器{
位置：相对位置；
显示：内联块；
光标：指针；
}
/*文本块*/
#按钮容器.html文本块，
.cs文本块{
位置：绝对位置；
底部：4px；
宽度：100%；
身高：30%；
框大小：边框框；
背景色：#fff；
左侧填充：5px；
盒影：0 3px 6px rgba（0,0,0,0.16），0 3px 6px rgba（0,0,0,0.23）；
变换：框阴影0.5s立方贝塞尔（.25,8,25,1），变换0.5s立方贝塞尔（.25,8,25,1）；
}
/*标志尺寸*/
#按钮容器，
#按钮容器。csharplogo{
宽度：440px；
}

-项目-


HTML
我的网络项目



C#
我的windows项目

您的标题是h1元素（语义不正确：h1->h6应用于显示标题元素，即标题），因此默认情况下，它的

显示

属性设置为

内联

---

将其包装在一个div中：它的

显示：block

默认属性将ul向下推

通过将内容插入

flex容器中，这个问题得到了极大的解决

因此：

HTML:

<div id="flex-container">     // THE CONTAINER //
        <ul id="button-container">
            <li>
                <a id="html-modal-button">
                    <img class="htmllogo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/38/HTML5_Badge.svg/600px-HTML5_Badge.svg.png">
                    <div class="html-text-block">
                        <h2>HTML</h2>
                        <p>My web projects</p>
                    </div>
                </a>
            </li>
            <li>
                <a id="cs-modal-button">
                    <img class="csharplogo" src="https://camo.githubusercontent.com/0617f4657fef12e8d16db45b8d73def73144b09f/68747470733a2f2f646576656c6f7065722e6665646f726170726f6a6563742e6f72672f7374617469632f6c6f676f2f6373686172702e706e67">
                    <div class="cs-text-block">
                        <h2>C#</h2>
                        <p>My windows projects</p>
                    </div>
                </a>
            </li>
        </ul>
  </div>

并删除：

margin-top: 35vh;
margin-left: 50vw;
transform: translate(-50%, -50%);

---

jshiddle:

这似乎只有在屏幕处于横向模式时才起作用，但在纵向上，标题仍在下方。我正在使用引导模式，该模式似乎改变了我的H6元素，因此结果大不相同，我可以使用其他模式吗？或者有没有办法绕过引导属性？

margin-top: 35vh;
margin-left: 50vw;
transform: translate(-50%, -50%);