将图像定位在Div上

Question

我正在使用Twitter Bootstrap，我有下面的div用音乐笔记布局，应该在div框的顶部展开，我不确定要应用的正确属性，以便它符合我的设计组合物。

<div id="teachings" class="row important">
    <div class="col-md-9">
        <h2>My Teachings</h2>
        <p>Music is an art that encourages many different types of learning.  Through my lessons students will learn how to play flute and piano. Students will learn how to read and notate music so they can write music and be able to play or sing anything they wish.  They also learn about different cultures and people through the music that they play. They can use the time that they perform to build confidence in themselves. Some students may find that they enjoy music at a high level and wish to continue to use music in the rest of their lives, as a career or added to another career.</p>
    </div>
    <div class="col-md-3">
        <img src="assets/images/music-note.png" alt="Music Note">
    </div>  
</div>

.important {
    background-color: #9999FF;
    padding: 30px;
    margin-top: 50px;
}

#teachings img {
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 1;
}

Answer 1

<强>更新

将图像定位在包含div的图像中，如附图所示。您应该绝对定位并将其垂直居中，然后您需要指定一定的高度。

.img-wrapper {
  position: relative;
}

.img-wrapper img {
  position: absolute;
  height: 300px;
  top: 50%;
  margin-top: -75px;
}

<强> DEMO

Answer 2

您可以将其居中，而不会以这种方式提供额外的上边距：

.img-wrapper {
   position: absolute;
   right: 0;
   top: 0;
   bottom: 0;
}

.img-wrapper img {
    position: absolute;
    height: 300px;
    top: 0;
    bottom: 0;
}