两个图像之间的中心文本

Question

问

两个图像之间的中心文本

我是你的鹏鹏鹏爷发布于 2023-02-13 17:00

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

我的右侧图像放在下一个"线"上,因此文本没有正确居中.

在我的index.html中,我把它:


    
    Text Here

对于我的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; }

Hrvoje Golci.. 5

你需要将两个图像放在'h1'元素之前


    
    
    Text Here

它的工作原理,这里是jsFiddle

说明: 如果在两个浮动元素之间放置div(或h1或任何块元素),它与清除它们的方式相同:它们之间都存在,因此它们永远不会出现在同一水平层中.

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

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 =""是很好的.
2023-02-13 17:03 回答

水儿本人_164

撰写答案