在div的同一级别上将图像和居中文本左对齐? [英] Left-align image and centered text on same level inside of a div?

问题描述

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;
}

我目前有此设置.我想将横幅广告放置在与文字相同的位置上，但是我希望横幅广告在屏幕的左侧，而文字在屏幕的中央.

I have this setup currently. I would like to position the banner on the same level as the text, but I would like to have the banner on the left-hand side of the screen with the text in the center of the screen.

似乎我唯一的选择是:浮动图像(将需要大量的硬编码值以使其看起来不错)，将文本包裹在<div>中以使其特定于居中(这会使它下降到图像下方)，或者将图像和文本居中对齐-这是我目前正在做的事情.

It seems like my only options are either: floating the image (would need a ton of hard-coded values to make this look OK), wrapping the text in a <div> to center it specifically (which causes it to drop below the image), or centering both the image and the text -- which is what I do currently.

我发现了很多关于此的指南，但是它们似乎要么使用简单的网站布局来浮动图像，要么使文本垂直对齐，或者找到可接受的中心横幅/文本组合.

I found a lot of various guides on this, but they seem to either float the image using a simple website layout, or vertically align the text, or find the center banner/text combo acceptable.

有想法吗?

谢谢.

推荐答案

为什么不只是利用CSS位置呢?像此.

Why not just exploit CSS position? like this.

欢呼

这篇关于在div的同一级别上将图像和居中文本左对齐?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！