麻烦以文字和图像为中心

时间:2018-02-13 22:27:49

标签: html css css3

我试图设置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%;
}

非常感谢任何帮助!

4 个答案:

答案 0 :(得分:1)

您可以尝试使用flexbox。

h1p括在div(.text)中,然后

display:flex;容器中添加.events

您还需要设置h1p的保证金,因为它们有默认保证金。

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

请参阅下面的示例代码。

&#13;
&#13;
.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;
}
&#13;
 <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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

您应该将eventsmoveit放入容器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>

然后是最小的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;
}

这会让你接近你的照片。当然,调整字体等以便更接近匹配。

答案 2 :(得分:0)

你可以这样做。它主要用于内联块和两个包装器DIV,内部包装两个文本元素,外部包装内包装和图像。外包装器以text-align: center为中心,因为它是一个内联块,所以它可以工作。通过以下方式完成垂直居中:position: relativetop: 50%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>

在codepen中相同:https://codepen.io/anon/pen/QQMqOw

答案 3 :(得分:0)

这应该给你一些贴心的东西。我用过flexbox。您只需要设置字体样式,粗体等样式。

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