如何对齐图像和h1标题ajadecently？ [英] How can I align the image and the h1 header 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屋！