抱歉英語不好。有什么想法可以在不使用邊距等的情況下將其移動到中心嗎？也許還有其他方法。
是否可以在任何移動螢屏上自動調整影像和視頻？在我使用的代碼下方：
HTML
<div id="tv_container">
<iframe width="720" height="480" src="https://www.youtube.com/embed/vToBbWibGw8?controls=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
CSS
#tv_container {
width: 720px;
height: 480px;
position: relative;
}
#tv_container:after { //frame
content: '';
display: block;
background: url('../home-img/framevid(4).png') no-repeat top left transparent;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: 10;
}
#tv_container iframe { //video
position: absolute;
top: 30px;
left: 40px;
z-index: 5;
}
uj5u.com熱心網友回復：
您可以使用 3 種方式使影像居中：
- 將其邊距設定為自動
margin: 0px auto;- 使用網格并在 CSS 中使用以下代碼：
display: flex;
justify-content: center;
// justify-self: center;
// justify-items: center;
// align-items: center;
// ...- 我不推薦使用位置主機的方式是將一個標簽作為具有相等或相對位置的父標簽，將另一個標簽（照片）作為子標簽，并在頁面上設定四個主要的位置方向。
對于不同頁面大小的圖片大小，不得不說，設定頁面的寬度不應該使用像素，而應該使用百分比如下：
width: 80%;uj5u.com熱心網友回復：
我只是通過 JS 添加了 CSS 和 HTML 元素。這是我的代碼：
#tv_container {
width: 720px;
height: 480px;
position: relative;
}
#tv_container:after {
content: '';
display: block;
background: url('../home-img/framevid(4).png') no-repeat top left transparent;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: 10;
}
#tv_container iframe {
position: absolute;
top: 30px;
left: 40px;
z-index: 5;
}
.frame {
display: flex;
justify-content: center;
}<body>
<section class="frame">
<div id="tv_container">
<iframe width="720" height="480" src="https://www.youtube.com/embed/vToBbWibGw8?controls=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</section>
</body>uj5u.com熱心網友回復：
使用text-align: center你的物件樣式。
我不知道您想要將哪些物件居中，但它應該適用于所有物件。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/388475.html
標籤：javascript html css Vue.js
下一篇：如何在vue中使用選擇框選項？