Solved

CSS Text height and Div height

Posted on 2011-02-26
4
734 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
  • 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:gurvinder372
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:
gurvinder372 earned 500 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

863 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now