?
Solved

CSS Text height and Div height

Posted on 2011-02-26
4
Medium Priority
?
743 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
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 customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

801 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