Question

这是我的代码：https://codepen.io/anon/pen/dEqJLr#anon-login 这是我想做的事情：https://imgur.com/a/NxvyHAC 基本上，我希望子标题（“ helpthistext”）位于我的标题上方，并且我不确定如何实现此目的。

body,
html {
  font-family: 'Montserrat';
  margin: 0;
  height: 100%;
}

body {
  background-color: red;
}

.newtest {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 75%;
}

<div class="newtest">
  <span class="sub-head">helpthistext</span>
  <h1 class="main-head">title one & another one</h1>
</div>

Answer 1

flex-direction:column是你所追求的

body,
html {
  font-family: 'Montserrat';
  margin: 0;
  height: 100%;
}

body {
  background-color: red;
text-align:Center;
}

.newtest {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 75%;
}

<div class="newtest">
  <span class="sub-head">helpthistext</span>
  <h1 class="main-head">title one & another one</h1>
</div>

Answer 2

请在新的测试中添加弯曲方向。

.newtest {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 75%;
      flex-direction: column;
}

Answer 3

即使您想在浏览器视口中的主标题上方直观显示.sub-head，也可能使.main-head出现在标记中的display: flex下方。

要实现此目的，请将.newtest应用于.main-head，然后：

给予2 .sub-head的顺序
给1依次.newtest { display: flex; flex-wrap: wrap; } .main-head { order: 2; width: 100%; margin-top: 0; } .sub-head { width: 100%; order: 1; font-size: 16px; }

工作示例：

<div class="newtest">    
<h1 class="main-head">title one &amp; another one</h1>
<div class="sub-head">helpthistext</div>
</div>

import Vue from 'vue';
import VueI18n from 'vue-i18n';

import en from './en';
import fr from './fr';

Vue.use(VueI18n);
const messages = { en, fr };

export default new VueI18n({
  locale: 'fr',
  silentTranslationWarn: true,
  messages,
});

Answer 4

尝试下面的代码...

<div class="myDiv">
  <h3>helpthistext</h3>
  <h1>title one & another one</h1>
</div>

.myDiv {
  margin: 20px auto;
  width: 50%;
}

.myDiv h3 {
  margin: 0px;
}

.myDiv h1 {
  margin: 0;
}

需要一些帮助来定位标题和子标题

4 个答案: