vertically align text in a background image with wrapping of text

Hello,

I am trying to vertically center text in a background image, I found a solution on this site that sets the line-height to the height of the background image. This works just fine, except when the text is too long that it wraps.

div.module h2{
width:178px;
width:"182px";
height:28px;
font-family:"Avenir Black", verdana, geneva, sans-serif;
background:url(../images/nav_subhead_bg.gif) repeat;
text-transform:uppercase;
padding:8px 0 0 7px;
font-size:10px;
font-weight:bold;
color:#175495;
margin:0px;
margin:"0 0 8px 0";
}

As you can see I am using padding now to create a vertically centered look. Is there a better way to vertically align the text that can handle wrapping?

Nov 16 '06 #1

Subscribe Post Reply

4415

AricC

1,892

Expert 1GB

Try white-space: nowrap; or an overflow property or text-align: center and have the background in a div? Not really sure what you mean you may want to post a link to the page to help.

HTH,
Aric

Nov 16 '06 #2

avi

Try white-space: nowrap; or an overflow property or text-align: center and have the background in a div? Not really sure what you mean you may want to post a link to the page to help.

HTH,
Aric

Hi Aric,

I cant post the page here as it is within intranet. here is a screen capture:

the width of the text can vary as it is generated dynamically.

Nov 16 '06 #3

AricC

1,892

Expert 1GB

You can try text-wrap: none or text-wrap: suppress

[I'm on IE 6 ( can't test it on a well supported browser ) right now and neither work but big shock! You could always use a style to keep the text a smaller size like 8px.

Nov 16 '06 #4

AricC

1,892

Expert 1GB

Disregard above use white-space: nowrap:

[html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
</head>
<style type="text/css">
.container
{
position: absolute;
width: 500px;
height: 500px;
border: 1px solid black;
z-index: 0;
}

.box
{
position: absolute;
margin-left: 30px;
margin-top: 25px;
width: 100px;
height: 100px;
border: 1px solid black;
z-index: 1;
}

.box1
{
position: absolute;
margin-left: 135px;
margin-top: 25px;
width: 100px;
height: 100px;
border: 1px solid black;
z-index: 2;
}

.box2
{
position: absolute;
margin-left: 240px;
margin-top: 25px;
width: 100px;
height: 100px;
border: 1px solid black;
z-index: 3;
}
.box3
{
position: absolute;
margin-left: 345px;
margin-top: 25px;
width: 100px;
height: 100px;
border: 1px solid black;
z-index: 4;
}

</style>

<body>
<div class="container">

<div class="box">
Some Content Goes Here
</div>
<div class="box1">
Some Content Goes Here
</div>
<div class="box2">
Some Content Goes Here
</div>
<div class="box3">
<span style="white-space: nowrap">
Some Content Goes Here and so on and so on and so on
</span>
</div>

</div>

</body>
</html>[/html]

Nov 16 '06 #5

by: Kai Grossjohann | last post by:

I have a table which contains a top-aligned table cell: .... <tr style="height:40"> ... <td colspan="1" rowspan="2" align="left" valign="top" style="overflow:hidden;">...

HTML / CSS

centering images vertically...

by: George Ziniewicz | last post by:

.. I try to use CSS when possible, though I am still learning and don't maximize its use. In particular, I still use a table to provide for a centered image in a few slideshows (though table...

HTML / CSS

Don't understand text-align

by: Robert Nicholson | last post by:

So I've got one page where I have an image inside a DIV with text-align: center and the image is correctly centered in that block. Making me think that text-align will center the contents of a...

HTML / CSS

layout prob

by: Wilhelm Kutting | last post by:

HTML / CSS

Please, help me vertically fit text into an inner DIV

by: pamelafluente | last post by:

Hello experts, I need some help to do in a proper way what I am doing. I have some "cells" in a web page. Each "cell" is made of 2 DIV. One is inside the other. Example with 2 "cells" : <div...

HTML / CSS

Table cell auto stretching vertically when defined height

by: rsearing | last post by:

I am new to HTML and will have to beg if this is obvious, but I am trying to design a table that looks like: ******************************** *----A------*------------------------*...

HTML / CSS

How to align images or text at the bottom or sides.

by: vinit_mahajan99 | last post by:

Hello all, I want to align the images and controls at the bottom of a master page or at the right side. I tried to do it with the table but I was not successful. The image should be seen at...

ASP.NET

Center Image Vertically

by: jerrygadd | last post by:

Can some body help me vertically center an image using CSS? The customer only uses IE, and so the code is not debugged for other browsers! The image in question is found on line 1075 :...

HTML / CSS

Which elements should be affected by text-align:center

by: Stevo | last post by:

I've found that for IE6+, if you add the property text-align:center to a DIV, then *anything* inside it gets centered. That can be a table, an object/embed, another DIV, an image, or some text. ...

HTML / CSS

One-click Importing Excel Data into a*Database

by: ryjfgjl | last post by:

In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...

Microsoft Excel

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

vertically align text in a background image with wrapping of text

Similar topics