2

I am trying to align the video to the center of the image.

.vbackground {
  background-image: url('http://s1.postimg.org/hdo0xh2of/image.png');
  background-repeat: no-repeat;
  width: 600px;
  height: 600px;
  position: relative;
}
#match {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='vbackground'>
  <video controls id='match' width='300' height='300'>
    <source src='match.mp4' type="video/mp4" />
  </video>
</div>

How could I make the video at the center of the image (from all sides)? It currently gets aligned at the bottom of the image.

Justinas
  • 41,402
  • 5
  • 66
  • 96
Suhail Gupta
  • 22,386
  • 64
  • 200
  • 328

2 Answers2

1

Try removing the position: absolute rule from the match id selector and set the text-align property on the .vbackground class to center.
This should work - 

.vbackground {
    background-image: url('http://s1.postimg.org/hdo0xh2of/image.png');
    background-repeat: no-repeat;
    width: 600px;
    height: 600px;
    position: relative;
    text-align: center;
 }    
 #match {
    /*position: absolute;*/
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
divesh premdeep
  • 1,070
  • 3
  • 16
  • 28
  • Just realized that using the `text-align: center;` rule for positioning an image is not recommended (see http://stackoverflow.com/questions/7055393/center-image-using-text-align-center?rq=1). You could instead, set the width and height of .vbackground to the original image's size, i.e. 594px/372px respectively. – divesh premdeep Mar 02 '15 at 15:42
0

Just add margin-left:auto and margin-right: auto; to your #match CSS STYLE and it will align the video to the center of the image.

 
#match {

  margin-left: auto;
  margin-right: auto;

}
user3738165
  • 12
  • 3