SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Zealot mistaya123's Avatar
    Join Date
    Dec 2009
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question how to align text in center?

    Hi
    Please tell me how to make the text of a link come in the middle of the box.
    I have a horizontal navigation bar. but the texts like, home, contact us, etc. displayed as blocks, are at the top of their boxes. increasing the margin or the padding makes the whole box come down. i want to bring the text in the middle.
    I hope u understand what im talking about .
    Any help please? i have attached an image of the navigation bar.

    html code:
    HTML Code:
    <div class="nav">
        	<div class="navigation"></div>
            <div class="center1">
            	<ul>
                  <li><a href=""><span>About Us</span></a></li>
                  <li><a href=""><span>Portfolio</span></a></li>
                  <li><a href=""><span>Contact Us</span></a></li>
                  <li><a href=""><span>About Us</span></a></li>
                  <li><a href=""><span>About Us</span></a></li>
                  <li><a href=""><span>About Us long</span></a></li>
          	 	</ul>
            </div>        
            <div class="right1"></div>
        </div>
    css code:
    Code:
    .nav{
    	/*border:#00F 1px solid;*/
    	margin: -45px 0px 0px 0px;
    }
    
    .right1 {
    	height:45px;
    	background:url(../images/rr2.gif) right no-repeat;
    	width:10px;
    	float:right;
    }
    
    .navigation {
    	width:270px;
    	height:45px;
    	background:url(../images/header_tub.gif) left no-repeat;
    	float:left;
    	
    }
    
    
    
    .center1, .center1 ul {
    	height:45px;
    	width: 630px;
    	float:left;
    	background:url(../images/g_h2.gif) center repeat-x;
    }
    
    
    .center1 ul li {
    	display:block;
    	float:left;
    	height:36px;
    	margin-top:3px;
    }
    
    
    .center1 a:link, .center1 a:visited {
    	text-decoration:none;
    	color:#C9F9C1;
    	display:block;
    	height:36px;
    	padding:0px 0px;
    	border: 1px solid red;
    }
    
    .center1 ul li a span {
    	display:block;
    	height:36px;
    	padding:0 15px 0 0;
    	margin-left:15px;
    	border:1px solid orange;
    }
    
    
    .center1 li a:hover {
    	color:#060;
    	text-decoration:none;
    	background:url(../images/ahover-bg.png) left top no-repeat;
    	height:36px;
    }
    
    .center1 ul li a:hover span{
    	background:url(../images/spanhover-bg.png) right top no-repeat;
    	height:36px;
    }
    Attached Images Attached Images

  2. #2
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    622
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    replace this in your css

    Code:
    .center1 ul li a span {
    	display:block;
    	height:30px;
    	padding:6px 15px 0 0;
    	margin-left:15px;
    	border:1px solid orange;
    }
    vineet

  3. #3
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,269
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    ^ Hm, that might work: because the height was adjusted (made smaller), the adding top padding shouldn't be able to screw with the total height of the box.

    increasing the margin or the padding makes the whole box come down.
    Because padding is added to the height or width of a block. So see that Vineet has lowered the height of the box from 36px to 30px... then you can add the 6px padding and the size is the same as before.

    There's also a popular trick where the line-height is set equal to the height of the box the text is in (so in the span, if it's 30px high then the line-height would also be 30px).
    However that trick fails once you get text long enough to wrap.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Location
    Essex, UK
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Add a line height the same height as your height to your list items

    Code:
    .center1 ul li {
    	display:block;
    	float:left;
    	height:36px;
            line-height:36px;
    	margin-top:3px;
    }
    This will automatically center them in the middle.

  5. #5
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,269
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Only reason we might not want to do that, Tom, is because of the last link:

    s/he called it "About Us long" and I'm expecting some actual long text might appear there.

    Since the sites I build have long dutch words, I often am not able to use the line-height trick because once you get text wrapping, it's too big (you'll have 36px of line height for each line of text).

    So while at first I thought line-height would be best, with that "long" sitting there, I think Vineet's is a better idea for now (to be honest I'd rewrite all the HTML and CSS differently and possibly would try to use vertical-align: middle instead).

  6. #6
    SitePoint Zealot mistaya123's Avatar
    Join Date
    Dec 2009
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It worked! thanx.
    lol it was so simple! and i had spent hours wondering and fighting with the code.
    whats wrong with using line-heights?

  7. #7
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,269
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Just take your HTML and make the text of one of your buttons really really long (multiple words I mean). Like, "Check Out Our Products!"

    You'll see it.

    If all your text fits, though, then it won't be a problem (until someone has larger text... so you might also want to test with some text-enlargement (not zoom)).

  8. #8
    SitePoint Zealot mistaya123's Avatar
    Join Date
    Dec 2009
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok i get it about the line-heights.
    yes my code is not perfect. im just a learner yet. hoping to master it. (soon i hope!)

  9. #9
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,269
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    yes my code is not perfect. im just a learner yet. hoping to master it. (soon i hope!)
    Ain't none of us masters, but some of us have lost hair in the trenches : )

  10. #10
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Location
    Essex, UK
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    So while at first I thought line-height would be best, with that "long" sitting there, I think Vineet's is a better idea for now (to be honest I'd rewrite all the HTML and CSS differently and possibly would try to use vertical-align: middle instead).
    But using the "vertical-align: middle" I thought that wouldn't just solve the issue unless you also used line-height? I maybe wrong, but thought vertical-align only really worked on table cells with out the use on line-height.

  11. #11
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,269
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Vertical-align: middle wouldn't work with the original code posted, no.

    However it does work on inlines, not just in table cells, though my understanding of it working with inlines is screwy enough that half the time when I try to implement it, I do it wrong.

    What it does is let an inline align itself vertically to the (state where, bottom, baseline, middle, top, or the rest) of an adjoining element (here's where I get confuzled, I forget if this other element also has to be inline... I thought so).

    So for instance I'll use it a lot for lining a text input with a submit button, or lining up a checkbox or radio button with a label. Since they're all either inlines or inline-blocks, they can line each other up with their lines, since inlines have those lines listed above (baseline etc).

    Off Topic:

    Getting a bit off-topic:
    I keep this link bookmarked because it shows all the goofy lines of inline boxes and how weird they get when they play together: http://dbaron.org/css/2000/01/dibm-20000113


    Edit: here's another link, one of those oldies but goodies.. I have to re-read it every once in a while cause I always forget the little details: http://phrogz.net/CSS/vertical-align/index.html

    *edit3 I forgot this but of course vert-align also works with the CSS property display: table which you can put on non-table elements (except in IE7 and below).

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by tom26 View Post
    But using the "vertical-align: middle" I thought that wouldn't just solve the issue unless you also used line-height? I maybe wrong, but thought vertical-align only really worked on table cells with out the use on line-height.
    Vertical-align and line-height have no corrolation whatsoever. THey can be used together but one does not depend on the other to work

    Quote Originally Posted by Stomme poes View Post
    However it does work on inlines, not just in table cells, though my understanding of it working with inlines is screwy enough that half the time when I try to implement it, I do it wrong.
    It is a tricky subject and even Eric Meyer has troubule with it. I sometimes have trouble implimenting it but if you truly understand the inline formatting module, even small sections, then you can piece together how to get it working.

    Gary Turner does a good job explaining how to get it working on his workshop
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  13. #13
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,269
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Yes, he does : )


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •