[英]Trouble centering text and image
我正在嘗試為 div 設置樣式,我需要能夠將兩行文本彼此.hand
,圖像( .hand
)位於右側。 我不能得到這個。 我一定不明白如何做到這一點,因為我已經查找了解決方案,但它們對我不起作用。 這是我的代碼筆: https ://codepen.io/iamgonge/pen/MQvEWY ? editors = 1100
這是它應該是什么樣子的圖像:什么部分應該是什么樣子。
這是我的代碼: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%;
}
這里的任何幫助將不勝感激!
您可以嘗試使用 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; }
<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>
您應該將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;
}
這讓你接近你的照片。 當然,調整字體等以獲得更接近的匹配。
你可以這樣做。 它主要與內聯塊和兩個包裝 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>
在代碼筆中也是如此: https ://codepen.io/anon/pen/QQMqOw
這應該給你一些接近的東西。 我使用了彈性盒。 您只需要設置字體樣式、粗體等的樣式。
--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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.