Html 无法正确对齐图像上方的文本_Html_Css

Html 无法正确对齐图像上方的文本

html css

Html 无法正确对齐图像上方的文本,html,css,Html,Css,我无法正确对齐图像上方H1内的文本标记，每次都不在我想要的位置。有时它在左边或右边，我试图将h1包含在容器中，但他只是消失了 <!doctype html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="refresh" content="20; url=011.html" /> <title>title</title> </head>

我无法正确对齐图像上方H1内的文本标记，每次都不在我想要的位置。有时它在左边或右边，我试图将h1包含在容器中，但他只是消失了

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="20; url=011.html" />

<title>title</title>
</head>
<body>

<div class="shadow"<a target="none" href="paris.jpg">
<div id="texto"><h1>Yes</h1></div>
  <img src="010.jpg"  class="logo">
</div>
<video id="bgvideo" autoplay loop>
  <source src="club01.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/webm">
Your browser does not support the video tag.
</video>

</body>
</html>

你试过这样的东西吗

<html>
    <head>
    <style>
        #texto {
            width:100%;
            height:51px;
            color:white;
            text-align:center;
        }

        #texto h1 {
            width: 60px;
            display: block;
            margin: 0 auto;
            line-height:51px;
            vertical-align:middle;
            color: #FFFFFF;
            text-align:center;
            background-color:black;
            font-size: 30px;
        }

        div.shadow {
            max-width:90%;
            text-align: center;
            max-height:90%;
            overflow:visible;
        }
        img.logo {

            max-width:90%;
            max-height:90%;       
            border-radius: 5%;
        }
        video#bgvideo{
            min-width:100%;
            min-height:100%;
            width:auto;
            height:auto;
            background-size:cover;
        }
    </style>
    </head>
    <body>
    <div class="shadow">
            <a target="none" href="">
            <div id="texto"><h1>Yes</h1></div></a>
            <img src="http://vignette2.wikia.nocookie.net/teenbeachmovie/images/b/bf/Sad-face.jpg"  class="logo">
        </div>
        <video id="bgvideo" autoplay loop>
            <source src="club01.mp4" type="video/mp4">
            <source src="movie.ogg" type="video/webm">
            Your browser does not support the video tag.
        </video>
    </body>
</html>


#texto{
宽度：100%；
高度：51px；
颜色：白色；
文本对齐：居中；
}
#texto h1{
宽度：60px；
显示：块；
保证金：0自动；
线高：51px；
垂直对齐：中间对齐；
颜色：#FFFFFF；
文本对齐：居中；
背景色：黑色；
字体大小：30px；
}
阴影区{
最大宽度：90%；
文本对齐：居中；
最高高度：90%；
溢出：可见；
}
img.logo{
最大宽度：90%；
最高高度：90%；
边界半径：5%；
}
视频#BG视频{
最小宽度：100%；
最小高度：100%；
宽度：自动；
高度：自动；
背景尺寸：封面；
}
您的浏览器不支持视频标记。

您尝试过类似的方法吗

<html>
    <head>
    <style>
        #texto {
            width:100%;
            height:51px;
            color:white;
            text-align:center;
        }

        #texto h1 {
            width: 60px;
            display: block;
            margin: 0 auto;
            line-height:51px;
            vertical-align:middle;
            color: #FFFFFF;
            text-align:center;
            background-color:black;
            font-size: 30px;
        }

        div.shadow {
            max-width:90%;
            text-align: center;
            max-height:90%;
            overflow:visible;
        }
        img.logo {

            max-width:90%;
            max-height:90%;       
            border-radius: 5%;
        }
        video#bgvideo{
            min-width:100%;
            min-height:100%;
            width:auto;
            height:auto;
            background-size:cover;
        }
    </style>
    </head>
    <body>
    <div class="shadow">
            <a target="none" href="">
            <div id="texto"><h1>Yes</h1></div></a>
            <img src="http://vignette2.wikia.nocookie.net/teenbeachmovie/images/b/bf/Sad-face.jpg"  class="logo">
        </div>
        <video id="bgvideo" autoplay loop>
            <source src="club01.mp4" type="video/mp4">
            <source src="movie.ogg" type="video/webm">
            Your browser does not support the video tag.
        </video>
    </body>
</html>


#texto{
宽度：100%；
高度：51px；
颜色：白色；
文本对齐：居中；
}
#texto h1{
宽度：60px；
显示：块；
保证金：0自动；
线高：51px；
垂直对齐：中间对齐；
颜色：#FFFFFF；
文本对齐：居中；
背景色：黑色；
字体大小：30px；
}
阴影区{
最大宽度：90%；
文本对齐：居中；
最高高度：90%；
溢出：可见；
}
img.logo{
最大宽度：90%；
最高高度：90%；
边界半径：5%；
}
视频#BG视频{
最小宽度：100%；
最小高度：100%；
宽度：自动；
高度：自动；
背景尺寸：封面；
}
您的浏览器不支持视频标记。

为了让CSS在小提琴上可见，我不得不稍微弄乱了一下CSS，但看看这个：

基本上，您只需将图像和

h1

相对于

textto

div放置在绝对位置即可

#texto h1 {
    margin:auto;
    line-height:51px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -100%);
    vertical-align:middle;
    color: #FFFFFF;
    font-size: 75px;
}

为了让CSS在小提琴上可见，我不得不稍微弄乱了一下CSS，但看看这个：

基本上，您只需将图像和

h1

相对于

textto

div放置在绝对位置即可

#texto h1 {
    margin:auto;
    line-height:51px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -100%);
    vertical-align:middle;
    color: #FFFFFF;
    font-size: 75px;
}

你在

中有语法错误，我有，我仍然有相同的问题。你在中有语法错误，我有，我仍然有相同的问题。修复！缺少位置：固定；在视频里。非常感谢，修好了！缺少位置：固定；在视频里。非常感谢你。