2
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.

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.

Thoughts?

Thanks in advance.

Quill
  • 2,729
  • 1
  • 33
  • 44
Sean Anderson
  • 27,963
  • 30
  • 126
  • 237

2 Answers2

3

Why not just exploit CSS position? like this.

Cheers

Linmic
  • 761
  • 4
  • 12
  • I liked this one. :) Nice, simple and I understood exactly what was going on. Thanks! Nothing against Snippet's answer, I'm sure they both work relatively identically. – Sean Anderson Apr 06 '11 at 20:00
0

put the text in a div and add:

height: /*height of parent*/
line-height:  /*height of parent*/
cmplieger
  • 7,155
  • 15
  • 55
  • 83