Question

**注意所有＆lt;＆gt;标签已被删除，以允许代码显示 ** 我已经玩了好几个小时了，如果没有在设计结束时使用解决方法（即Corel绘图），我就不能真正开始工作了

*在我继续之前，

首先，网站网址为AdventistAviation.com.au

其次，我可以说...我知道这可以用样式表来完成......但是，在这种情况下......我不这样做！（所以请不要再烦恼我用这个选项纠缠我，除非下面的方法绝对没办法工作）

第三，我下面的问题的解决方法是创建已经在其自己的背景中居中的图像（与其旁边的徽标大小相同）然后导入它（这是一个坏主意，因为如果在未来有人将主标题背景更改为除白色之外的其他颜色......它看起来很糟糕！）

首先我添加图片（这没问题）

然而，由于avada主题左侧的徽标大约为250×250平方，标语文字不再位于标题中心（您可以想象将上面的徽标与下面的徽标进行比较）

我正在使用主题森林AVADA主题。在主题选项＆gt;标题＃4的横幅代码...

我想在iframe中添加以下内联css样式，以垂直居中Tagline（即将其与徽标中间对齐）

style =“vertical-align：middle;”

<iframe src="http://image_URL.png" style=”vertical:align: middle;” width="200" height="200"></iframe>

这似乎与1中的方法没有任何不同。

<div style="vertical-align: middle;"><iframe src="http://image_URL.png" width="200" height="200"></iframe></div>

我希望如果我将iframe放在包含样式的标签中，我可能会实现我的目标......唉它仍然无法工作。

我已经到了我的脑袋充满了非工作方法的地步，我无法进一步发展。

有人可以帮忙解决这个问题吗？

p.s我试图在html 5中为标签找到一些内联css样式教程（特别是关于垂直对齐样式）而没有任何运气。

该死的w3c用于贬低html5中的html垂直对齐方法！

Answer 1

没有充分的理由为此使用内联样式，但无论如何，我已经使用内联样式编辑了一大块HTML，这些样式将获得我想要的内容：

<div class="avada-row" style="margin-top:0px;margin-bottom:0px; display: table; width: 100%">
    <div class="logo" style="display: table-cell;margin-right:0px;margin-top:0px;margin-left:0px;margin-bottom:0px; vertical-align: middle;">
        <a href="http://adventistaviation.com.au">
            <img src="http://adventistaviation.com.au/wp-content/uploads/2014/02/AAA-QLD-LogoType5_outlinedSQC1-e1398740621697.jpg" alt="Adventist Aviation Association" class="normal_logo">
        </a>
    </div>
    <div id="header-banner" style="display: table-cell; vertical-align: middle; float: none; text-align: right;">
        <div style="/* vertical-align: middle; */" height="170" width="500">
            <img src="https://googledrive.com/host/0B7IkcUtUKfX8SkpLS1NuTlR4cDA/AAA_Tagline.png" width="400" height="200">
        </div>
    </div>
</div>

Answer 2

@ adam：

一个简单的解决方案是更改此代码：

<div id="header-banner">
    <div style="vertical-align: middle;" height="170" width="500">
        <img src="https://googledrive.com/host/...etc..." width="400" height="200">
    </div>
</div>

就这样：

<div id="header-banner" style="margin-top: 70px;">        
        <img src="https://googledrive.com/host/...." width="400" height="200">
</div>

如何在html5 <img/>或<iframe>标签</iframe>中使用内联css样式（style =＆＃34; vertical-alignment：middle;＆＃34;）

2 个答案: