CodingForums.com - Centring text horizontally & vertically

CodingForums.com (http://www.codingforums.com/index.php)

- HTML & CSS (http://www.codingforums.com/forumdisplay.php?f=13)

- - Centring text horizontally & vertically (http://www.codingforums.com/showthread.php?t=271192)

cm123077

08-23-2012 05:11 AM

Centring text horizontally & vertically

I am trying to center the text displayed at the top of the larger pop ups that scroll on the slider. This is the title of the page. I was able to center them horizontally, but not vertically. Can anyone help me out? In the css, this is .banner h2

http://174.120.16.66/~thomasse/

Thanks

Sammy12

08-23-2012 06:21 AM

1 Attachment(s)

Add #about-us and #meet-the-team in the html (see attachment, sorry photobucket won't upload right now)

Add to CSS:

Code:

#about-us h2,

#meet-the-team h2 {

    line-height: 85px;

}

Major Payne

08-23-2012 06:23 PM

H/V Centering:

http://www.wpdfd.com/editorial/thebox/deadcentre3.html
No Image: http://nopeople.com/CSS%20tips/verti...CSS/page4.html

cm123077

08-26-2012 04:42 AM

Hmmm, not quite there yet. Let me tinker with this a bit. Thanks for the tips

Will Bontrager

08-27-2012 11:42 PM

OK, I don't see a slider.

Perhaps this will help - centering both vertically and horizontally with examples.

http://www.willmaster.com/library/we...g-with-css.php

Will

cm123077

08-30-2012 12:00 AM

Thanks everyone. I am not sure what is going on with my code, but I can not get this to be 100% correct. I have tried several different css possibilities, but it never gets there..close but no cigar. Can anyone give me a hand with this. Hopefully, seeing the correct method will cement in my mind what I have been doing wrong & it will be a permanent lesson I will be able to use in the future. Thanks

Sammy12

08-30-2012 12:12 AM

http://www.youtube.com/watch?v=jUI0mVusn1A

you can also just use a class and add it to each one:

Code:

.slide-vertical-center {

      line-height: 85px;

}

cm123077

09-06-2012 04:22 AM

Quote:

Originally Posted by Sammy12 (Post 1265346)

http://www.youtube.com/watch?v=jUI0mVusn1A

you can also just use a class and add it to each one:

Code:

.slide-vertical-center {

      line-height: 85px;

}

the issue I think may be that some have a single line of text, then others have 2 lines...difficult to overcome cleanly, at least for me.

Sammy12

09-06-2012 09:29 AM

There is the vertical-align table hack which is what youtube uses. Wrap the <h2> in two <div>'s like so:

Code:

<div class="vcenter-container">

     <div class="vcenter">

             <h2>Anything</h2>

     </div>

</div>

Centering style:

Code:

.vcenter-container {

     display: table;

     *position: relative; /* ie6 & 7 */

}

.vcenter {

     display: table-cell;

     vertical-align: middle;

     *position: absolute; *top: 50%; /* ie6 & 7 */

}

.vcenter h2 {

     *position: relative; *top: -50%; /* ie6 & 7 */

}

Setup code:

Code:

.banner .vcenter-container {

     height: 125px; /* requirement for vcenter-container */

     width: 100%;

     margin-bottom: 12px;

}



/* this part overwrites stuff on line 99 of style.css */

.banner h2 {

     padding-bottom: 0 !important;

     height: auto !important;

     line-height: auto !important;;

}

http://i1114.photobucket.com/albums/...light1/dds.png

All times are GMT +1. The time now is 03:58 PM.