5

我在尝试将图像和 h1 标签对齐在一行时遇到问题。我试过 display: inline 和 inline-block 他们没有工作，只做了两者的容器。我在该部分将宽度添加到 100%，但仍然没有。浮动也不起作用，如果起作用，它会破坏页面的对齐方式。我究竟做错了什么？有时很难理解为什么它不能按预期工作并且需要一些帮助。

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;
}
4

3 回答 3

4

正如我在这里所做的那样，添加display: inline-block;到您的属性中。h1

于 2013-09-07T18:31:34.757 回答
0

尝试这个：-

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; 
}
于 2013-09-07T18:32:43.010 回答
0

你有一些 CSS 冲突h1...

这应该工作

section {
    display: block;
}
h1 {
    position:relative; /*position wherever desired on the page*/
    display: inline-block;
    font-weight:bold;
    font-size:40px;
    color:#FFFFFF;
    background-color:#FFB405;
}
section img { 
    display: inline-block;
}
于 2013-09-07T18:32:52.543 回答