[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

CSS Text height and Div height

Posted on 2011-02-26
4
Medium Priority
?
745 Views
Last Modified: 2012-08-13
I have a Div with

      height: 120px;
      margin: auto;

I have a another Div with
      font-size:20px;
      line-height:1;
      padding-top : 25px;

I then have HTML
<div id="Header">
     <div class="headerText">
           <span id="ctl00_lblTitle" class="headerText">My Text</span>
      </div>
 </div>

I would expect "My Text" to appear in the center of the first Div  as (120-20)/2=25 but it does not.

How do I fix this?
0
Comment
Question by:PhotoCompManager
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 16

Expert Comment

by:sjklein42
ID: 34986837
(120-20)/2=25

I don't think so.  I think it equals 50

0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 34988090
try

<div id="Header">
     <div class="headerText">
           <span id="ctl00_lblTitle" class="headerText">My Text</span>
      </div>
 </div>

.headerText
{
   width:120px;
}
.headerText span
{
   width:20px;
   margin-left:50px;
}
0
 

Author Comment

by:PhotoCompManager
ID: 34990893
Gurvinder 372 - I need to align vertically not horizontally

Sjklein42 - true - the problems of making a simplified version for the question!

However the issue is still the same with  
      font-size:20px;
      line-height:1;
      padding-top : 50px;

0
 
LVL 40

Accepted Solution

by:
Gurvinder Pal Singh earned 2000 total points
ID: 34990966
then do the same thing with top and bottom margin

<div id="Header">
     <div class="headerText">
           <span id="ctl00_lblTitle">My Text</span>
      </div>
 </div>

.headerText
{
   height:120px;
}
.headerText span
{
   height:20px;
   margin-top:50px;
}

0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Find out what you should include to make the best professional email signature for your organization.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

650 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question