0

I've looked around and I cannot really understand how to solve this problem. Consider this little youtube search result, which brings back the thumbnail of the video, title and a small image. The vertical alignment was possible on the thumbnail and title since they are relative to the parent . However my small image needs to be placed in the middle aswell but also right=0. So my soulution was to make the image position absolute which resulted in it losing the vertical alignment. Or either keep the relative positioning and thus resulted in it not being placed in the right of the screen. Is there anyway I can achieve to position it in the vertical center and right?

Note that I want the list to be dynamic so set the height is not possible since it will result in more issues.

.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>
Unknown Potato
  • 687
  • 2
  • 11
  • 38

2 Answers2

1

For this purpose you could use flex as in the example snippet.

.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>
0

I use this to position centre -> right

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