• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 943
  • Last Modified:

center text in div

I have a div purposed set to higher height of 24 px. I want the text inside to be centered.

.center-text {
   vertical-align:middle;
}

did not work. how to do this correctly?
0
bhomass
Asked:
bhomass
2 Solutions
 
for_yanCommented:
Can't you use it simply like that:

<div align="center">
0
 
for_yanCommented:
If you are talking about vertical aligm=nment, check this:

http://phrogz.net/css/vertical-align/index.html
0
 
for_yanCommented:
go to the bottom part of the link I posated above for practical recommendation
on how to allign vertically
0
Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

 
bhomassAuthor Commented:
for yan:

works in Firefox, but not IE.
0
 
for_yanCommented:
The example they have on their page seems to be working in my IE 6.0

Maybe you could post your example.
0
 
for_yanCommented:
this one shows cehterd in my IE
vertically-centered.html
vert-centered.JPG
0
 
bhomassAuthor Commented:
one problem, if I add float:left to the div, then center text fails

  <style type="text/css">
  .vtext {
      height:80px;
      vertical-align:middle;
      display:table-cell;
      border-width:1px;
      border-style:solid;
      border-color:1;
      float:left;
}
  </style>

any way to leave float in there and still center text?
0
 
rawinnlnx9Commented:
So this depends on what other elements are wrapped around you <div> if you <div> exists by itself then yes this is trivial. Also does your DIV have any CSS classes associated with it? There's a lot that can influence this. Such as the style="float: right/left/center;" and other things. Post your code without it we are just shooting in the wind.

Ah look, I found it: the code I have below worked better for me that is if I understood you properly. I took out some stuff that was just noise in the form of CSS with no purpose.

<body>
<style type="text/css">
#myoutercontainer 
  { 
     text-align: center;
     align: center;
   }
#myinnercontainer 
{ 
  height:10em; 
  margin-top: -5em;
  text-align: center;
  align: center;
}
</style>
...
<div id="myoutercontainer" width="100%">
	<div id="myinnercontainer" width="100%">
		<p>Hey look! I'm vertically centered!</p>
		<p>How sweet is this?!</p>
	</div>
</div>
</body>

Open in new window

0
 
bhomassAuthor Commented:
align is not a legal css attribute, AFAIK.
0
 
Sathish David Kumar NArchitectCommented:
Is the div coming under table ?
0
 
bhomassAuthor Commented:
no
0
 
seanyc111Commented:
try using:
<center>
whatever you want here
</center>
0
 
bhomassAuthor Commented:
<center> is for horizontal centering, not vertical.
0
 
for_yanCommented:
But you already have example which is working,
What is the issue?
0
 
bhomassAuthor Commented:
I finally tried out example by rawinnlnx9: and it does not work. only "how sweet is this?!" shows up and has top chopped off.

code for for_yan: works.
0
 
bhomassAuthor Commented:
working for FF and IE
0
 
bhomassAuthor Commented:
ignore last comment. it was an error.

the one above it which indicates the problem is the actual last intended post.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now