无法将文本和图像居中

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

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

Answer 4

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