CODEWITHSUNDEEP
htmlcss
Joshua Sky Greenough
Joshua Sky Greenough

Reputation: 39

Why won't DIV center?

I have a DIV that contains two elements: a video and an image. I would like these to remain centered horizontally; however, they're slightly off center toward the right. Can anyone spot my error?

HTML:

<center>

  <div id="videoWrapper">
    <canvas height="46%" width="46%"></canvas>
    <video id="video1" preload="metadata" controls>
      <source src="../Images/J's Garden FINAL MOVIE.mp4" type="video/mp4">
    </video><img src="../Images/videonav1.png" id="test" width="25%"   height="46%">
  </div>

CSS:

#videoWrapper{
  display:inline-block;
  margin: 0 auto;
}
.video{
  height: 46%   !important;
}
#test{
  height: 46%;
}

Upvotes: 1

Views: 62

Answers (2)

user4639281
user4639281

Reputation:

As was already said, the center tag is deprecated and should not be used. I've reorganized your CSS to achieve the effect you're looking for. Basically the canvas tag was sitting beside the video tag, pushing it to the side. I find that it helps when troubleshooting to apply arbitrary background colors to each element to see how they interact with each other.

In this example I've used text-align: center to center the items

#videoWrapper {
    text-align: center;
}
#videoWrapper * {
    margin: 0 auto;
    display: block;
}
#video1,
#test {
    height: 46%;
}
<div id="videoWrapper">
    <canvas height="46%" width="46%"></canvas>
    <video id="video1" preload="metadata" controls>
        <source src="../Images/J's Garden FINAL MOVIE.mp4" type="video/mp4">
    </video>
    <img src="../Images/videonav1.png" id="test" width="25%" height="46%">
</div>

Upvotes: 3

MisterCat
MisterCat

Reputation: 1641

i believe by default image tag is inline, so you make it center by text-align:center, you cal also try the textalign:center on the videowrapper div

Upvotes: 1

Related Questions