Html 如何在同一垂直位置对齐两个图元_Html_Css

Html 如何在同一垂直位置对齐两个图元

html css

Html 如何在同一垂直位置对齐两个图元,html,css,Html,Css,我有以下情况：但我希望everytime和beta显示在与此相同的垂直位置：我有以下html： <h1 style="display: block;margin: 0 auto;position: relative;"> <svg enable-background="new 0 0 298.9 55.8" viewBox="0 0 298.9 55.8" xmlns="http://www.w3.org/2000/svg"> <styl

我有以下情况：

但我希望everytime和beta显示在与此相同的垂直位置：

我有以下html：

<h1 style="display: block;margin: 0 auto;position: relative;">
    <svg enable-background="new 0 0 298.9 55.8" viewBox="0 0 298.9 55.8" xmlns="http://www.w3.org/2000/svg">
        <style type="text/css">.st0{fill:#231F20;}</style>
        <path class="st0" d="..."></path>
    </svg>
    <p style="position: absolute;left: 85%;font-size: 50%;color: white;line-height: 0px;">beta</p>
</h1>

我如何解决这个问题？请记住，每次都应该居中，测试版应该在它的右边

为什么你要先做内联样式，但是为了完成这项工作，你能发布你的CSS吗…@TGarret，我几乎没有CSS方面的经验，所以我只是按照我在教程中找到的东西做，但它不起作用。它不起作用，发生的事情是元素被推到了右边一点。玩它的位置。左：60%；排名前10%；直到达到您想要的位置。它起作用了，但我如何处理这种情况，因为它应该对移动设备做出响应。您能否创建两个不同的徽标，一个带有测试版，一个没有，并根据它们是否为测试版显示您想要的徽标？然后你可以把它放在任何你想放的地方，你就不必担心它的位置或响应性。如果你的定位和大小正确，固定位置应该仍然可以在移动设备上工作，因为固定位置是相对于视口的。

position: fixed;left: 85%

<p style="position:absolute; left:85%; font-size: 50%;color:#333; line-height: 0px; vertical-align: middle; display:inline-block; ">beta</p>

<html>
<head> 
<style>
.vasile
{
display: inline-block;
line-height: 1px;
vertical-align: middle;
}
</style></head>
<body>
<div>
<h1 class="vasile"> asdasda</h1>
<p class="vasile">asdasda</p>
</div>
</body>
</html>