aligning text directly under centered image/video

Question

I've used flexbox to center a video on the page:

.pf-video-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

Now, I want to horizontally align text directly under this video. How can I accomplish this? In other words, how can I align the div I've called pf-video-text-container directly under the video? I want it to be left aligned directly under the video, not centered or anything like that.

Here is the relevant code:

    <div className="pf-main">
      <div className="pf-video-container">
        <ReactPlayer url="https://vimeo.com/475160747" controls />
      </div>
      <div className="pf-video-text-container">
        <p>Sembrando Lucha</p>
        <p>
          A small town confronts the expansion of an immigrant detention
          facility in their backyard. The struggle continues, support the
          community of McFarland by sharing and using our toolkit:
          bit.ly/GEOoutMcFarland
        </p>
      </div>
    </div>

The CSS:

.pf-main {
  border: 1px dashed black;
  width: 100%;
  font-size: 1.5rem;
}

.pf-video-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

This is what I have now:

Here is an example of what I want:

score 0 · Answer 1 · answered Dec 14 '20 at 04:43

0

Try this and let me know if it worked

.pf-video-container,
.pf-video-text-container {
 width: 100%;
 display: flex;
 justify-content: center;
 text-align: left;
}

answered Dec 14 '20 at 04:43

Dylan Anlezark

1,256
2
12
27

Nope that didn't work. It just put the title and the text summary on the same line. Still aligned to the left /beginning of the screen and not aligned with the video. – Jevon Cochran Dec 14 '20 at 04:47
any chance you can provide any more css that could be relevant to the html you have posted – Dylan Anlezark Dec 14 '20 at 04:51
I just updated the post with all the CSS for that particular component – Jevon Cochran Dec 14 '20 at 04:54

score 0 · Answer 2 · answered Dec 14 '20 at 05:23

Use an impressive library of ready-made video players like

https://github.com/mediaelement/mediaelement

    <script src="mediaelement-and-player.min.js"></script>
    <script src="dist/jump-forward/jump-forward.js"></script>
    <script src="dist/skip-back/skip-back.js"></script>
    <script src="dist/speed/speed.js"></script>
    <script src="dist/quality/quality.js"></script>
    <script>
      var mediaElements = document.querySelectorAll('video, audio');

      for (var i = 0, total = mediaElements.length; i < total; i++) {

        var features = ['playpause', 'current', 'progress', 'duration', 'volume', 'skipback', 'jumpforward', 'speed', 'fullscreen'];

        new MediaElementPlayer(mediaElements[i], {
          autoRewind: false,
          features: features,
        });
      }
    </script>

<center>
    <div className="pf-main">
      <div className="pf-video-container">
         <video id="player1" class="video-js" preload="none" height="450" style= "width:93%;" controlsList="nofullscreen nodownload noremoteplayback" controls>
           <source src='https://vimeo.com/475160747' type="video/mp4" data-quality="HD">
                <p>
          A small town confronts the expansion of an immigrant detention
          facility in their backyard. The struggle continues, support the
          community of McFarland by sharing and using our toolkit:
          bit.ly/GEOoutMcFarland
              </p>
         </video>
      </div>
    </div>
<center>

.pf-main {
  border: 1px dashed black;
  width: 100%;
  font-size: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pf-video-container {
  width: 100%;
}

aligning text directly under centered image/video

2 Answers2