如何在另一個div中垂直對齊div？

Question

我在父div中將兩個不同的內容放入div中，並且我想將第一個div與第二個div垂直對齊

對不起，語言不好

 .title-pin { position: relative; } .pin-icon { position: absolute; width: 50px; height: 50px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; text-align: center; background-color: #333; color: #fff; } .star { font-size: 30px; line-height: 50px; } .title-container { padding-left: 60px; width: 400px; font-size: 24px; } 

 <div class="title-pin"> <div class="pin-icon"> <span class="star">★</span> </div> <div class="title-container"> <h3>This title is unstable. This title is unstable. This title is unstable.`enter code here`</h3> </div> </div> 

Answer 1

將此添加到您的CSS

.pin-icon {top: 50%; transform: translateY(-50%);}    

Answer 2

 .title-pin { position: relative; } .pin-icon { display: inline-block; width: 50px; height: 50px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; text-align: center; background-color: #333; color: #fff; vertical-align: middle; } .star { font-size: 30px; line-height: 50px; } .title-container { padding-left: 30px; width: 400px; display: inline-block; font-size: 24px; vertical-align: middle; } 

 <div class="title-pin"> <div class="pin-icon"> <span class="star">★</span> </div> <div class="title-container"> <h3>This title is unstable. This title is unstable. This title is unstable.`enter code here`</h3> </div> </div> 

Answer 3

您可以通過多種方式獲得此信息。 簡而言之，我只在您的CSS類中添加一行。pin-icon 頂部：25％

 .title-pin { position:relative; } .pin-icon { position: absolute; width: 50px; height: 50px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; text-align: center; background-color:#333; color:#fff; top:25%; } .star { font-size: 30px; line-height: 50px; } .title-container { padding-left: 60px; width:400px; font-size:24px; } 

 <div class="title-pin"> <div class="pin-icon"> <span class="star">★</span> </div> <div class="title-container"> <h3>This title is unstable. This title is unstable. This title is unstable.`enter code here`</h3> </div> </div> 

Answer 4

您只需使用Flexbox即可實現。

只需添加display: flex和align-items: center到包裝div的align-items: center ，在這種情況下為.title-pin 。

使用display: flex一些優點display: flex屬性

• 您在.title-container文本將.title-container多長時間不再.title-container 。
• 原則上，您甚至不需要為子元素設置特定的高度，但是我認為在您的情況下，您希望.pin-icon始終具有相同的高度和寬度，因此將二者都設置為50px很好。

 .title-pin { position: relative; display: flex; align-items: center; } .pin-icon { width: 50px; height: 50px; border-radius: 50%; text-align: center; color: #fff; background: #000; margin: 0 20px; } .star { font-size: 30px; line-height: 50px; } .title-container { width: 400px; font-size: 24px; } 

 <div class="title-pin"> <div class="pin-icon"> <span class="star">★</span> </div> <div class="title-container"> <h3>This title is unstable. This title is unstable. This title is unstable.`enter code here`</h3> </div> </div> 

Answer 5

 .title-pin { position: relative; display: block; margin: auto; } .pin-icon { <!--remove relateive: absolute; --> width: 50px; <!-- add this --> margin-left: 55px; <!-- add this --> height: 50px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; text-align: center; background-color: #333; color: #fff; } .star { font-size: 30px; line-height: 50px; } .title-container { padding-left: 60px; width: 400px; font-size: 24px; } 

 <div class="title-pin"> <div class="pin-icon"> <span class="star">★</span> </div> <div class="title-container"> <h3>This title is unstable. This title is unstable. This title is unstable.`enter code here`</h3> </div> </div> 

Answer 6

將以下內容添加到您的.pin-icon CSS中。 希望這會幫助你。

.pin-icon {
  top:50%;
  margin-top:-25px;
}

Answer 7

只要該元素具有height ，這將使該元素垂直居中。

position: absolute;
top: 0;
bottom: 0;
margin: auto;

 .title-pin { position: relative; } .pin-icon { position: absolute; width: 50px; height: 50px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; text-align: center; background-color: #333; color: #fff; top: 0; bottom: 0; margin: auto; } .star { font-size: 30px; line-height: 50px; } .title-container { padding-left: 60px; width: 400px; font-size: 24px; } 

 <div class="title-pin"> <div class="pin-icon"> <span class="star">★</span> </div> <div class="title-container"> <h3>This title is unstable. This title is unstable. This title is unstable.`enter code here`</h3> </div> </div>