Question

I've看上去around，而我cannot确实understand如何解决此问题。考虑一下这个小的youtube搜索结果，它会带回视频的缩略图，标题和小图像。由于缩略图和标题相对于parent，因此可以在缩略图和标题上进行垂直对齐。但是，我的小图像也需要放在中间，right=0也要放在中间。因此my soulution是要使图像位置绝对，从而使其失去垂直对齐。或keep相对位置，从而导致其未放置在屏幕右侧。无论如何，我可以实现将其放置在垂直中心的正确位置吗？

请注意，我希望列表是动态的，因此无法设置高度，因为这会导致更多问题。

.mobilItem {
    list-style: none;
    border-bottom: 1px solid #2f2f2f;
    padding-bottom: 1%;
    padding-top: 1%;
}
.bilden {
    border-radius: 30%;
    vertical-align: middle;
    margin-left: 1%;
}
.title {
   display: inline-block;
    max-width: 50%;
    vertical-align: middle;
}
.plus {
    vertical-align: middle; 
    cursor: pointer;
    right:0;
}

<li class="mobilItem">	 
<img data-video="k2C5TjS2sh4" src="https://i.ytimg.com/vi/k2C5TjS2sh4/hqdefault.jpg" alt="play" class="bilden" width="30%" height="30%">
	<p class="title">Roxette - It Must Have</p>
	<img src="https://img.icons8.com/cotton/2x/plus--v1.png" alt="Roxette - It Must Have Been Love (Official Music Video)" class="plus" id="k2C5TjS2sh4" width="45" height="45" name="https://i.ytimg.com/vi/k2C5TjS2sh4/hqdefault.jpg">
	</li>
  <li class="mobilItem">	 
<img data-video="k2C5TjS2sh4" src="https://i.ytimg.com/vi/k2C5TjS2sh4/hqdefault.jpg" alt="play" class="bilden" width="30%" height="30%">
	<p class="title">Roxette - It Must Have</p>
	<img src="https://img.icons8.com/cotton/2x/plus--v1.png"  alt="Roxette - It Must Have Been Love (Official Music Video)" class="plus" id="k2C5TjS2sh4" width="45" height="45" name="https://i.ytimg.com/vi/k2C5TjS2sh4/hqdefault.jpg">
	</li>

Answer 1

为此，您可以在示例代码段中使用flex。

.mobilItem {
    list-style: none;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: stretch;
    flex-flow: row;
    height: auto;
    width: 100%;
    border-bottom: 1px solid #2f2f2f;
    padding-bottom: 1%;
    padding-top: 1%;
}
.bilden {
    border-radius: 30%;
    margin-left: 1%;
    width: 20%;
}
.title {
   display: inline-block;
    width: calc(70% - 45px);
    margin: 0 auto;
}
.plus {
    width: 6%;
    cursor: pointer;
    right:0;
    width: 45px;
    height: 45px;
}

<li class="mobilItem">	 
<img data-video="k2C5TjS2sh4" src="https://i.ytimg.com/vi/k2C5TjS2sh4/hqdefault.jpg" alt="play" class="bilden" width="30%" height="30%">
	<p class="title">Roxette - It Must Have</p>
	<img src="https://img.icons8.com/cotton/2x/plus--v1.png" alt="Roxette - It Must Have Been Love (Official Music Video)" class="plus" id="k2C5TjS2sh4" width="45" height="45" name="https://i.ytimg.com/vi/k2C5TjS2sh4/hqdefault.jpg">
	</li>
  <li class="mobilItem">	 
<img data-video="k2C5TjS2sh4" src="https://i.ytimg.com/vi/k2C5TjS2sh4/hqdefault.jpg" alt="play" class="bilden">
	<p class="title">Roxette - It Must Have</p>
	<img src="https://img.icons8.com/cotton/2x/plus--v1.png"  alt="Roxette - It Must Have Been Love (Official Music Video)" class="plus" id="k2C5TjS2sh4" name="https://i.ytimg.com/vi/k2C5TjS2sh4/hqdefault.jpg">
	</li>

Answer 2

我用它来定位中心->正确

.parent{
    position: relative;
    width: 400px; /* can be any */
    height: 400px; /* can be any */
}
.child{
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

垂直居中对齐到绝对定位的子项

2 个答案: