html - 无法将文本和图像居中

Question

我正在尝试设置一个 div 的样式，我需要能够将两行文本彼此居中，图像 (.hand) 位于右侧。我无法得到这个。我一定不了解如何执行此操作，因为我已经查找了解决方案，但它们对我不起作用。这是我的代码笔:https://codepen.io/iamgonge/pen/MQvEWY?editors=1100

这是它应该是什么样子的图像:what section should look like.

这是我的代码:HTML:

 <div class="events">
   <h1>You're Cool, We're Cool,</h1>
   <p class="moveit">come see us at a event near you.</p>
   <img class="hand"src="http://res.cloudinary.com/adamscloud/image/upload/v1518559592/hand_lco9ed.png">
 </div>

CSS:

.events {
    background: #fbdd37;
  height: 150px;

}
.events h1{
    margin-top: 0;
    position: relative;
    float: left;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.moveit{
    margin-top: 0;
    position: relative;
    float: left;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.hand {
    width: 8%;
}

如有任何帮助，我们将不胜感激!

Answer 1

你可以尝试使用 flexbox。

将 h1 和 p 放在一个 div(.text) 中，然后

在.events容器中添加display:flex;

您还需要设置 h1 和 p 的边距，因为它们有默认边距。

p,h1{  margin:10px 20px;  }

请参阅下面的示例代码。

.events {
  background: #fbdd37;
  height: 150px;
  padding:0;
  margin:0;
  display:flex;
  justify-content:center;
  align-items:center;
}
.text{
  text-align:center;
}
.hand {
    width: 15%;
}

p,h1{
  margin:10px 20px;
}

 <div class="events">
   <div class="text">
     <h1>You're Cool, We're Cool,</h1>
     <p class="moveit">
       come see us at a event near you.
     </p>
   </div>
   <img class="hand"src="http://res.cloudinary.com/adamscloud/image/upload/v1518559592/hand_lco9ed.png">
 </div>