html - 左对齐图像和居中文本在 div 内的同一级别？

Question

HTML:
<br />
    <div class="UpperTitle">
        <img src="Images/CableSolve Logo.jpg" align="absmiddle" padding-right: 10px;" /> CableSolve Web Dashboard - Version 0.1.1
    </div>
<br />

CSS:
.UpperTitle
{
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #CEDEF4;
    font-weight:bold;
    color: #224499;
    border-radius: 10px;
}

我目前有这个设置。我希望将横幅放置在与文本相同的水平上，但我希望横幅位于屏幕左侧，文本位于屏幕中央。

看来我唯一的选择是: float 图像(需要大量硬编码值才能使其看起来不错)，将文本包装在 <div> 中。将其专门居中(这会导致其落在图像下方)，或者将图像和文本居中 - 这就是我目前所做的。

我找到了很多关于这方面的指南，但它们似乎要么使用简单的网站布局 float 图像，要么垂直对齐文本，要么发现中心横幅/文本组合可以接受。

想法？

提前致谢。

Answer 1

为什么不直接利用 CSS 位置呢？像this .

干杯