CODEWITHSUNDEEP
htmlcssimage
Sean Anderson
Sean Anderson

Reputation: 29291

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.

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.

Upvotes: 2

Views: 16949

Answers (2)

cmplieger
cmplieger

Reputation: 7351

put the text in a div and add:

height: /*height of parent*/
line-height:  /*height of parent*/

Upvotes: 0

Linmic
Linmic

Reputation: 791

Why not just exploit CSS position? like this.

Cheers

Upvotes: 3

Related Questions