垂直和水平对齐div容器中的两个元素[重复]答案

【问题标题】：Align two elements in div container vertically and horizontally [duplicate]垂直和水平对齐div容器中的两个元素[重复]
【发布时间】：2017-06-13 21:35:27
【问题描述】：

我在容器中得到了一个文本和一个按钮。两个元素都应该垂直居中。此外，我希望将文本设置在 div 的中间，并且按钮应该在右侧。

那么我怎样才能使文本元素居中并将按钮放在它旁边呢？我希望标题与按钮并排。

到目前为止我的代码：

* {
  margin: 0;
}

body {
  color: #ffffff;
  background-color: #4a4a4a;
}

#header {
  height: 60px;
  background-color: #313132;
}

#headerTitle {
  font-weight: bold;
  text-align: center;
  font-size: 30px;
  top: 50%;
  left: 50%;
}

#menuBtn {
  right: 20%;
}

  <div id="header">
    <p id="headerTitle">Title</p>
    <button id="menuBtn">Menu</button>
  </div>

【问题讨论】：

我希望它们并排。我更新了我的帖子。

标签： html css

【解决方案1】：

您可以使用 flex 模型并在按钮平均大小的标题中添加一些左填充，这样 p 可以在中间保持安静。

示例：（添加渐变以显示中间）

* {
  margin: 0;
}

body {
  color: #ffffff;
  background #4a4a4a;
}

#header {
  height: 60px;
  background:linear-gradient(to right,transparent 50%, rgba(0,0,0,0.25) 50%),
  linear-gradient(to top,transparent 50%, rgba(0,0,0,0.25) 50%)#313132;
  display:flex;
  align-items:center;
  padding-left:2.75em;/* this should the width + eventually right margin of button so <p> can stand in the middle of container instead space left */
}

#headerTitle {
  font-weight: bold;
  text-align: center;
  font-size: 30px;
  margin:auto;/* will center element */
}

#menuBtn {
margin-right:0;/* will pull to the right */
}

<div id="header">
    <p id="headerTitle">Title</p>
    <button id="menuBtn">Menu</button>
  </div>

【讨论】：

太棒了！这就是我需要的，谢谢:)
解决方案非常依赖按钮的宽度，但渐变魔术偷走了我的+15分:(:))

【解决方案2】：

首先居中h1 添加行高等于header 高度和text-align:center

第二，使用菜单居中

#menuBtn {
  position:absolute;
  right:20px;
  top:50%;
  transform:translateY(-50%);
}

top:50% 将菜单向下移动 50% 的标题高度，然后transform:translateY(-50%); 将菜单向上移动 50% 的自身高度，从而将其垂直居中在 header 内

见下文。

* {
  margin: 0;
}

body {
  color: #ffffff;
  background-color: #4a4a4a;
}

#header {
  height: 60px;
  background-color: #313132;
	position:relative;

}

#headerTitle {
  font-weight: bold;
  text-align:center;
  font-size: 30px;
	line-height:60px;

	
}

#menuBtn {
  position:absolute;
	right:20px;
	top:50%;
	transform:translateY(-50%);
}

 <div id="header">
    <p id="headerTitle">Title</p>
    <button id="menuBtn">Menu</button>
  </div>

【讨论】：

非常感谢，这很好

【解决方案3】：

只需将按钮放在<p> 标签内即可。

<p id="headerTitle">Title<button id="menuBtn">Menu</button></p>

如果你想在文本和它旁边的按钮之间放置一些空间，你可以在按钮上添加一些边距，比如 si:

#menuBtn {
  right: 20%;
  margin-left: 20px;
}

【讨论】：

抱歉，这不是我需要的：/
您需要什么？我就是这样理解你的解释的。也许提供更清晰的解释会有所帮助？
@peterHasemann 这正是我对你的问题的解释，你应该尽量让你的问题更清楚。

【解决方案4】：

将它们放在另一个容器内的同一个容器中
不要设置内容器的宽高
设置内胆text-align = "center"
根据需要设置外部容器填充

你的布局会这样

外包装{
内包装{

  <p> , <h1>   

           }   
      }

【讨论】：

【解决方案5】：

您应该始终尝试自己研究答案，并尽力解决问题。对于这类问题，网上有很多资源，只要谷歌一下。

对于垂直对齐，这是一个很好的阅读here。

无论如何，根据您所拥有的信息，根据您的问题提供，这应该证明是有用的。

* {
  margin: 0;
}

body {
  color: #ffffff;
  background-color: #4a4a4a;
}

#header {
  height: 60px;
  background-color: #313132;
}

#headerTitle {
  font-weight: bold;
  text-align: center;
  font-size: 30px;
}

#menuBtn {
  display: block;
  margin: 0 auto;
}


/* --- */

.float {
  height: 75px;
  width: 50%;
  display: block;
  float: left;
  background: #f0f;
}

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

<div id="header">
  <div class="float">
    <p id="headerTitle" class="align">Title</p>
  </div>
  <div class="float">
    <button id="menuBtn" class="align">Menu</button>
  </div>
</div>

问候，

-B

【讨论】：