我试图设置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%;
}
非常感谢任何帮助!
答案 0 :(得分:1)
您可以尝试使用flexbox。
将h1
和p
括在div(.text
)中,然后
在display:flex;
容器中添加.events
您还需要设置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;
}
&#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;
答案 1 :(得分:0)
您应该将events
和moveit
放入容器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: relative
,top: 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;
}