如何对齐图像和h1标题ajadecently? [英] How can I align the image and the h1 header ajadecently?
本文介绍了如何对齐图像和h1标题ajadecently?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有尝试将图像和h1标签在一行上对齐的问题。我试图显示:内联和内联块他们没有工作,只做了两个的容器。我添加了宽度到100%的部分,仍然没有。浮动也不工作,如果它,它拧紧页面的对齐方式。我做错了什么?有时很难理解为什么它无法按预期工作,需要一些帮助。
I have problems with trying to align the image and the h1 tag together on one line. I tried display: inline and inline-block they didn't work and only made the container of the two. I added the width to 100% on the section and still nothing. Float doesn't work either and if it did, it screws up the alignment of the page. What am I doing wrong? Sometimes it's hard to understand why it doesn't work as intended and need some help.
HTML
<section>
<img id="me" src="assets/img/pose1.jpg" alt="A photo of me." />
<h1>FOLLOW ME ON...</h1>
</section>
CSS
section{
display:inline-block;
width:100%;
}
h1{
position:relative; /*position wherever desired on the page*/
top:0;
bottom:0;
right:0;
left:0;
font-weight:bold;
font-size:40px;
color:#FFFFFF;
background-color:#FFB405;
}
推荐答案
添加 display:inline-block; 到您的
h1
属性此处。
这篇关于如何对齐图像和h1标题ajadecently?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文