将div容器中的两个元素垂直和水平对齐

Question

我在容器中有一个文本和一个按钮。两个元素应垂直居中。此外，我希望文本设置在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>

Answer 1

首先到中心h1添加等于header高度的行高，text-align:center

第二，使用菜单中心

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

其中top:50%将菜单向下移动50％的标题高度，然后transform:translateY(-50%);将菜单UP向上移动50%它自己的高度，从而将其垂直居中于{{1}内1}}

见下文。

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

Answer 2

您可以使用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>

Answer 3

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

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

如果你想在文本和它旁边的按钮之间留一些空格，你可以在按钮上添加一些边距，如si：

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

Answer 4

1. 将它们放在另一个容器内的同一容器中
2. 不设置内部容器宽度和高度
3. 设置内部容器text-align = "center"

4. 根据需要设置外部容器填充

   您的布局将如下所示

  

外包裹{
        innerWrap {

  <p> , <h1>   

           }   
      }

Answer 5

您应该始终尝试自己研究答案，尽力解决问题。网上有很多资源可以解决这类问题。

  

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

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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

此致

-B