如何将h1中的img元素居中，当图像是100％的屏幕宽度并始终保持宽高比？ This pen shows what I mean。我在这里看到了一些答案，但图像的宽度和高度总是固定的。中心h1垂直和水平在一个img元素中

2016-12-01 sanjihan

img-element不允许任何内容https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img也许你只需要一个背景图像与CSS？ – Esko

尝试设置相对于包装div的位置，并将绝对位置设置为h1。 –

寻求代码帮助的问题必须包括在问题本身**中重现它所需的最短代码**最好在[** Stack Snippet **]（https://blog.stackoverflow.com/2014/09/introducing-可运行的JavaScript-CSS-和HTML的代码段/）。 –

实现你的目标，你需要把两个IMG和H1到一个div并使用定位居中H1

#headerImage { 
 
    width:100%;   
 
    margin-left:auto; 
 
    margin-right:auto; 
 
    background-position:center; 
 
    background-repeat:no-repeat; 
 
    } 
 

 
#greeting{ 
 
    
 
    padding: 0px; 
 
    position: relative; 
 

 
} 
 

 
#greetin-h1{ 
 
text-align: center; 
 
color:#000; 
 
    position: absolute; 
 
    top:50%; 
 
    left:50%; 
 
    transform:translate(-50%,-50%); 
 
    z-index: 9999; 
 
    
 
}

<div id="greeting"> 
 
    <img id="headerImage" src="http://study.com/cimages/course-image/intro-to-business-syllabus-resource-lesson-plans_138757_large.jpg" alt=""/> 
 
    <h1 id="greetin-h1">THIS IS H1 ELEMENT</h1> 
 
</div>

来源

2016-12-01 13:17:36 Chiller

男人！你救了我！ 3小时尝试不同的解决方案，没有运气！ –

很高兴帮助:) – Chiller

问候添加CSS样式

#greetin { 
      padding: 140px 20px 50px 20px; 
      position: absolute; 
      top: 50%; 
      left: 50%; 
      transform: translate(-50%, -50%); 
      }

来源

2016-12-01 13:16:17 style28

为什么不使用图像作为背景？

html, body{ 
 
    width: 100vw; 
 
} 
 
#greeting{ 
 
padding: 140px 20px 50px 20px; 
 
background-image: url("http://study.com/cimages/course-image/intro-to-business-syllabus-resource-lesson-plans_138757_large.jpg"); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
} 
 

 
#greetin-h1{ 
 
    text-align: center; 
 
    color:black; 
 
}

\t <div id="greeting"> 
 
\t \t <h1 id="greetin-h1">THIS IS H1 ELEMENT</h1> 
 
\t </div>

来源

2016-12-01 13:17:44

为了解决为什么不使用背景图像的问题？我真的想要在它的东西alt属性。 – sanjihan

喜欢什么样的属性？我们可能可以让它们反正 –

alt属性。有人说这是ALT标签。它不是为背景图片定义的，因为背景图片是装饰性的。 – sanjihan

.wrapper { 
 
    position: relative; 
 
} 
 

 
img { 
 
    display: block; 
 
    width: 100%; 
 
} 
 

 
h1 { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    color: gold; 
 
}

<div class="wrapper"> 
 
    <img src="https://www.propointgraphics.com/wp-content/uploads/2016/01/stock-photos-vince_3219813k.jpg" alt=""> 
 
    <h1>Hello, World!</h1> 
 
</div>

来源

2016-12-01 13:18:32 jlowgren

谢谢，但图像不是全屏宽度。 – sanjihan

背景大小：封面使其与容器一样大，所以如果容器覆盖整个屏幕宽度，图像也会如此。 –

使用像这样的相对和绝对定位，表和表存储单元显示的组合：

CSS：

#headerImage { 
    position: relative; 
    text-align: center; 
    display: inline-block; 
} 
#headerImage img { 
    max-width: 100%; 
} 
#greeting { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
} 
#greetin-h1 { 
    margin: 0; 
    display: table; 
    width: 100%; 
    height: 100%; 
} 
#greetin-h1 span { 
    display: table-cell; 
    vertical-align: middle; 
}

HTML：

<div id="headerImage"> 
    <div id="greeting"> 
     <h1 id="greetin-h1"><span>THIS IS H1 ELEMENT</span></h1> 
    </div> 
    <img src="http://study.com/cimages/course-image/intro-to-business-syllabus-resource-lesson-plans_138757_large.jpg" alt=""> 
</div>

小提琴：https://jsfiddle.net/ve8sot21/1

这样的H1将始终水平居中和垂直无论图像尺寸。

来源

2016-12-01 13:45:42

中心h1垂直和水平在一个img元素中

回答

问候添加CSS样式

相关问题