对齐div

Question

我有这个div，其中有一个<h1>元素和两个社交媒体图标。我希望将它们与图标垂直居中的h1并排排列。我希望它以div为中心。这是我的codepen。

＆＃13;

＆＃13;

.social-section {
  position: relative;
  float: left;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -10%);
}

.social-section>h1,
.social-section>div {
  float: left;
  width: 50%;
}

.social-section>h1 {
  vertical-align: center;
}

＆＃13;

<div class="social-section">
  <h2>Follow us </h2>
  <a href src="/"><img src="https://cdn7.bigcommerce.com/s-vbmsnb3b18/product_images/uploaded_images/fb-logo.png" /></a>
  <a href src="/"><img src="https://cdn7.bigcommerce.com/s-vbmsnb3b18/product_images/uploaded_images/instagram.png" /></a>
</div>

＆＃13;

＆＃13;

＆＃13;

我在这里缺少什么？有一些简单的方法可以遵循？我似乎总是排队元素

Answer 1

尝试使用 Flexbox

• display:flex将并排对齐flex项（子元素）。
• align-items: center垂直对齐项目
• justify-content: center水平对齐项目

Stack Snippet

＆＃13;

＆＃13;

.social-section {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

＆＃13;

<div class="social-section">
  <h2>Follow us </h2>
  <a href src="/"><img src="https://cdn7.bigcommerce.com/s-vbmsnb3b18/product_images/uploaded_images/fb-logo.png" /></a>
  <a href src="/"><img src="https://cdn7.bigcommerce.com/s-vbmsnb3b18/product_images/uploaded_images/instagram.png" /></a>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需在display:inline-block

中设置元素即可

vertical-align:middle提供垂直居中的元素

＆＃13;

＆＃13;

.social-section
{
  text-align:center;
}

.social-section > *{
  display:inline-block;
  vertical-align:middle;
}

＆＃13;

<div class="social-section">
  <h2>Follow us </h2>
  <a href src="/"><img src="https://cdn7.bigcommerce.com/s-vbmsnb3b18/product_images/uploaded_images/fb-logo.png" /></a>
  <a href src="/"><img src="https://cdn7.bigcommerce.com/s-vbmsnb3b18/product_images/uploaded_images/instagram.png" /></a>
</div>

＆＃13;

＆＃13;

＆＃13;