使用 flexbox 使文本居中，然后将剩余 50% 的按钮居中 [重复]

Posted 2023-03-05

【中文标题】使用 flexbox 使文本居中，然后将剩余 50% 的按钮居中 [重复]

【英文标题】：Use flexbox to centre text then centre the button with the remaining 50% [duplicate]

【发布时间】：2017-12-13 22:34:13

【问题描述】：

不敢相信我才刚刚开始使用 flexbox，看起来很酷，但我被卡住了。我可能只是想多了，但我知道 flexbox 应该让事情变得更容易。

我想显示一个带有标题、标语和联系按钮的整页英雄图像，很简单吧？

我附上了我想要的图片：

基本上，我想将标题和标语文本居中放置在我使用的中心：

justify-content:center;

然后我希望按钮位于剩余 50% 的中心。我在侧面添加了绿色图像以帮助显示我想要的位置。

我尝试使用：

justify-space-around;

但这似乎将标题文本向上推。

这是我当前的代码：

* 
	margin:0;
	padding:0;


*, *:after, *:before 
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;


.website-container 
  display: grid;
 	grid-gap: 0rem;
	grid-template-columns: repeat(1fr ) ;

.website-container > * 
	display: flex;
	height: 100vh;

h1 
	font-weight: 600;
	font-size: 4vw;

.header 
  display:flex;
  justify-content: center;
  align-items: center;
  text-align:center;
  flex-direction: column;

button 
	--padding: 1.1em;
	color: black;
	font: inherit;
	background: none;
	padding: 1rem calc(1rem * 2);
	border: 2px solid black;
	border-radius: 2px;

button:hover 
	color: black;
	background: red;

<div class="website-container">
<header class="header">
  <div class="container-fluid">
    <div class="space"></div>
    <div class="title">
      <h1>Heading text here</h1>
      <h2>Slogan text here</h2>
    </div>      
    <div class="calltoaction">
      <button type="submit" style="--primary-button">button</button>
    </div>
  </div>
</header>
</div>

如果我遗漏了什么，请告诉我，我会在帖子中添加更多内容。

【参考方案1】：

现有标记最简单的方法是添加此规则

.calltoaction 
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);

并将position: relative 添加到.website-container>* 规则中，以便calltoaction 的绝对位置与之相关。

Fiddle demo

注意，你需要看整页的sn-p

堆栈sn-p

* 
  margin: 0;
  padding: 0;


*,
*:after,
*:before 
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;


.website-container 
  display: grid;
  grid-gap: 0rem;
  grid-template-columns: repeat(1fr);


.website-container>* 
  position: relative;
  display: flex;
  height: 100vh;


h1 
  font-weight: 600;
  font-size: 4vw;


.header 
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: column;


button 
  --padding: 1.1em;
  color: black;
  font: inherit;
  background: none;
  padding: 1rem calc(1rem * 2);
  border: 2px solid black;
  border-radius: 2px;


.calltoaction 
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);


button:hover 
  color: black;
  background: red;

<div class="website-container">
  <header class="header">
    <div class="container-fluid">
      <div class="space"></div>
      <div class="title">
        <h1>Heading text here</h1>
        <h2>Slogan text here</h2>
      </div>
      <div class="calltoaction">
        <button type="submit" style="--primary-button">button</button>
      </div>
    </div>
  </header>
</div>

---

我建议稍微简化一下代码，使用 Flexbox 属性并仍然得到相同的结果

这里的主要技巧是，而不是标记中的额外元素，使用伪元素作为 ghost 元素来平衡calltoaction，同时给它们flex-basis: 100% 和@ 987654331@ 默认为1，它们会同样收缩，并将title 保持在中间。

然后将.website-container .calltoaction 设为弹性容器，并将button 与align-items: center; 居中

Fiddle demo

* 
  margin: 0;
  padding: 0;


*,
*:after,
*:before 
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;


.website-container 
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 100vh;
  text-align: center;


.website-container::before,
.website-container .calltoaction 
  content: ' ';
  flex-basis: 100%;


.website-container .calltoaction 
  display: flex;
  align-items: center;


h1 
  font-weight: 600;
  font-size: 4vw;


button 
  --padding: 1.1em;
  color: black;
  font: inherit;
  background: none;
  padding: 1rem calc(1rem * 2);
  border: 2px solid black;
  border-radius: 2px;


button:hover 
  color: black;
  background: red;

<div class="website-container">
  <div class="title">
    <h1>Heading text here</h1>
    <h2>Slogan text here</h2>
  </div>
  <div class="calltoaction">
    <button type="submit" style="--primary-button">button</button>
  </div>
</div>

【讨论】：

感谢您的回答。我曾希望有一种仅使用 flexbox 的方法，但由于您的答案是唯一的答案，我想没有。我会将此标记为已回答，因为它在一天结束时是正确的，而不是我所希望的。谢谢。

@Dan 将在 1 秒内更新第二个样本。

@Dan 更新了第二个样本

你的第二个选项在我看来更好。谢谢