VIDEOS NOT CENTER |
VIDEOS NOT CENTER |
halim12 |
Aug 15 2023, 08:16 AM
Post
#1
|
Group: Members Posts: 3 Joined: 15-August 23 Member No.: 29,022 |
I set 2 videos at the page, trying to center them ... they move down as u see !!!
on different resolutions, they are not centered ... what to do ? po2.html_css.txt ( 501bytes ) Number of downloads: 71 |
pandy |
Aug 15 2023, 08:27 AM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,734 Joined: 9-August 06 Member No.: 6 |
Centered horizontally? One under the other or side by side?
If you want them under each other and centered horizontally you could use the below instead of what you have. CODE div.video1, div.video2 { text-align: center } Also read this: https://www.w3.org/Style/Examples/007/center.html |
coothead |
Aug 15 2023, 03:18 PM
Post
#3
|
Advanced Member Group: Members Posts: 207 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
Hi there halim12,
the following code will work well on all platforms... HTML CODE <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"> <title>video display</title> <link rel="stylesheet" href="screen.css" media="screen"> </head> <body> <h1>Two videos</h1> <div id="video-container"> <video controls playsinline> <source src="video/VIDEO1.mp4" type="video/mp4"> </video> <video controls playsinline> <source src="video/VIDEO2.mp4" type="video/mp4"> </video> </div> </body> </html> screen.css CODE body { background-color: #f9f9f9; font: normal 1em / 1.5 sans-serif; } h1 { font-size: 1.5em; font-weight: normal; color: #555; text-align: center; } #video-container { display: flex; justify-content: center; align-items: center; gap: 0.5em; } #video-container video { width: 100%; max-width: 28em; } @media ( max-width: 42em ) { #video-container { flex-direction: column; } } coothead |
Lo-Fi Version | Time is now: 25th May 2024 - 08:02 AM |