Trouble centering text and image - html

Question

Im trying to style a div I need to be able to center both lines of text on top of each other with the image (.hand) next them on the right. I can not get this. I must not be understanding how to do this because I've looked up solutions but they are not working for me. Here is my codepen: https://codepen.io/iamgonge/pen/MQvEWY?editors=1100
here is an image of what it should look like:what section should look like.
here is my code:
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%;
}
Any help here would be greatly appreciated!

Answer 1

You can try using flexbox.
Enclose the h1 and p in a div(.text) and then
add display:flex; in the .events container
also you will need to set the margin of h1 and p since they have a default margin.
p,h1{ margin:10px 20px; }
Please see the sample code below.
.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>

Answer 2

You should put the events and moveit into a container div:
<div class="events">
<div id="container"> <!-- This div added -->
<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>
And then the minimal CSS:
.events {
background: #fbdd37;
height: 150px;
text-align:center;
width:100%;
}
.moveit{
margin-top: 0;
}
#container{
text-align:center;
float:left;
margin-left:500px;
}
.hand {
width: 8%;
float:left;
margin-left:50px;
}
This gets you close to your picture. Of course, adjust the fonts, etc. for a closer match.

Answer 3

This should give you something close. I used flexbox. You would just need to style the font style, boldness, and etc.
--HTML--
<div class="events">
<div class="texts">
<div class="first-line">
<h1>You're Cool, We're Cool,</h1>
</div>
<div class="second-line">
<h2 class="moveit">come see us at a event near you.</h2>
</div>
</div>
<img class="hand"
src="http://res.cloudinary.com/adamscloud/image/upload/
v1518559592/hand_lco9ed.png"/>
</div>
--CSS--
.events {
background: #fbdd37;
height: 150px;
display: flex;
text-align: center;
justify-content: center;
}
.hand {
width: 10%;
height: 40%;
margin: 35px 20px;
}

Answer 4

You can do it like this. It works mainly with inline-blocks and two wrapper DIVs, the inner one wrapping the two text elements, the outer one wrapping the inner wrapper and the image. that outer wrapper is centered with text-align: center, which works since it's an inline-block. The vertical centering is done the usualy way: position: relative, top: 50% and transform: translateY(-50%):
.events {
background: #fbdd37;
height: 150px;
position: relative;
text-align: center;
}
.outer_wrap {
display: inline-block;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.inner_wrap {
display: inline-block;
}
.events h1 {
margin-bottom: 0;
}
.moveit {
margin-top: 0;
}
.hand {
display: inline-block;
width: 120px;
padding-left: 10px;
height: auto;
}
<div class="events">
<div class="outer_wrap">
<div class="inner_wrap">
<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>
</div>
The same in a codepen: https://codepen.io/anon/pen/QQMqOw