Question

在我的HTML5文档中，我想在页面的最左侧和右侧显示一个图像，然后居中，在它们之间有我的文本。我不能为我的生活得到正确的语法。我一直在寻找大量的答案，但我错过了一些东西。

我的右侧图像放在下一个“线”上，因此文字没有正确居中。

在我的index.html中，我把它放在：

<header>
    <img class="logo floatLeft" alt="Logo"  />
    <h1 class="logoHeader">Text Here</h1>
    <img class="logo floatRight" alt="Logo" />
</header>

对于我的CSS，我有这个：

.logo {
    width: 150px;
    height: 120px;
    content: url(logo.jpg);
}

.logoHeader {
    height: 120px;
    vertical-align: middle;
    text-align: center; 
}

.floatLeft { float: left; }

.floatRight { float: right; }

Answer 1

您需要将两个图像放在'h1'元素

之前

<header>
    <img class="logo floatLeft" alt="Logo"  />
    <img class="logo floatRight" alt="Logo" />
    <h1 class="logoHeader">Text Here</h1>
</header>

它有效，这里是jsFiddle

说明： 如果你将div（或h1或任何块元素）放在两个浮动元素之间，它与你清楚的一样：它们之间都是相同的，所以它们永远不会出现在同一个水平层中。

此外，在这里偏离主题，但如果您使用alt =“”属性，由于可访问性问题，如果您没有任何合理或描述性的写入，最好将其留空（但仍然保持属性）所以像这样alt =“”很好！盲人的屏幕阅读器将跳过这个图像，因为它与他无关，而不是打扰他阅读“徽标图形”..谁在乎？如果你根本没有放置alt属性，那么它将读取图像名称，因此如果不需要更具描述性，则alt =“”是很好的。

Answer 2

请参阅fiddle

位于h1和margin-top的{{1}}选择器你只需要放margin-bottom

Answer 3

你的标题是否有2个徽标作为背景图像，让h1成为标题中唯一的语义元素？

<header>
    <h1>Headline</h1>
</header>

header {
    background: url(logo1.png) left top no-repeat, 
                url(logo2.png) right top no-repeat;
}
h1{
    text-align:center
}

Answer 4

你浮动图像左和右;正确，并将您的文字放在两个图像之间，如this。

    <div class="container">

       <div class="left-image">        
       </div>

       This text is centered

       <div class="right-image">        
       </div>

    </div>

Answer 5

Jsfiddle

   header{
 border:1px solid black;   
}
img, h1{
    float:left;
    height:100px;
    text-align:center;
}
.logo1 {
    content: url(logo.jpg);
    width: 25%;

}
.logo2 {
    content: url(logo.jpg);
    width: 25%;

}
h1{
 width:50%;

}
}

<强>已更新

两个图像之间的中心文本

5 个答案: