Problem centering spans in a div

Page 1 of 1

12 Replies - 452 Views - Last Post: 13 July 2011 - 09:26 AM

#1 chrtr  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 12-July 11

Problem centering spans in a div

Posted 12 July 2011 - 10:13 PM

I have a problem centering 3 spans on both the x and y axis shown below. This is the code:

HTML:
<div class="header2">
		<div class="words">
			<span style="color:#be2f37;">service</span>
			<span style="color:#fff;">education</span>
			<span style="color:#00529b;">progress.</span>
		</div>
</div>


CSS:
.header2 {
	height: 250px;
	background: #87d8e9;

}
.words {
	display: inline;
}
.words span {
	font-size: 48px;
}


and how it turns out:

Posted Image
(the words are supposed to be centered in the blue box)

Now, I have tried the text-align: center; with no change, i have also tried the display: inline with top & bottom set at 50% and display: cell and display: table-cell. Any ideas? I've been at this for 3 hours and i'm stumped.

Thanks!

This post has been edited by chrtr: 12 July 2011 - 10:14 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Problem centering spans in a div

#2 souptoy  Icon User is offline

  • D.I.C Head


Reputation: 54
  • View blog
  • Posts: 243
  • Joined: 17-January 08

Re: Problem centering spans in a div

Posted 12 July 2011 - 10:49 PM

Using your HTML and CSS, I don't see what you see. Can you post it all?
Was This Post Helpful? 0
  • +
  • -

#3 chrtr  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 12-July 11

Re: Problem centering spans in a div

Posted 12 July 2011 - 10:51 PM

style.css:
/* Fonts */
@font-face {
    font-family: 'VegurBold';
    src: url('vegur-b_0.602-webfont.eot');
    src: url('vegur-b_0.602-webfont.eot?#iefix') format('embedded-opentype'),
         url('vegur-b_0.602-webfont.woff') format('woff'),
         url('vegur-b_0.602-webfont.ttf') format('truetype'),
         url('vegur-b_0.602-webfont.svg#VegurBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'VegurLight';
    src: url('vegur-l_0602-webfont.eot');
    src: url('vegur-l_0602-webfont.eot?#iefix') format('embedded-opentype'),
         url('vegur-l_0602-webfont.woff') format('woff'),
         url('vegur-l_0602-webfont.ttf') format('truetype'),
         url('vegur-l_0602-webfont.svg#VegurLight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'VegurMedium';
    src: url('vegur-m_0602-webfont.eot');
    src: url('vegur-m_0602-webfont.eot?#iefix') format('embedded-opentype'),
         url('vegur-m_0602-webfont.woff') format('woff'),
         url('vegur-m_0602-webfont.ttf') format('truetype'),
         url('vegur-m_0602-webfont.svg#VegurMedium') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'VegurRegular';
    src: url('vegur-r_0.602-webfont.eot');
    src: url('vegur-r_0.602-webfont.eot?#iefix') format('embedded-opentype'),
         url('vegur-r_0.602-webfont.woff') format('woff'),
         url('vegur-r_0.602-webfont.ttf') format('truetype'),
         url('vegur-r_0.602-webfont.svg#VegurRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* Resets */
body, p, ul, li, h1, h2, h3, h4, h5, h6, span, div { margin: 0; padding: 0; }
body {
	background-color: #fffff;
	font-family: 'VegurRegular';
}

h1,h2,h3,h4,h5,h6 {
	font-family: "VegurBold";
}
p {
	font-family: Verdana, serif;
	font-size: 13px;
}
a {
}
.wrapper {
	min-width: 900px;
	padding: 25px;
}
.header {
	padding-bottom: 30px;
}
/* Header 1 */
#logo {
	width: 179px;
	height: 56px;
	background:url('../img/logo.png') no-repeat;
}
/*Nav Section */
#nav {
	float: right;
	padding-top: 25px;
	font-size: 11pt;
}
.a {
	color: #000;
	padding: 0 10px 0 0;

}
.i {
	color: #CCC;
	padding-right: 10px;	
}
.i a {
	text-decoration: none;
	color: #CCC;
}
.i a:hover {
	color: #000;
}
/* Header 2 */
.header2 {
	height: 250px;
	background: #87d8e9;

}
.words {

}
.words span {
	font-size: 48px;
		display: inline;
	top: 50%;
	bottom: 50%;
}


HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link href="css/style.css" rel="stylesheet" type="text/css" />
	<title>Fox Chapel FBLA</title>
</head>
<body>
<div class="wrapper">
	<div class="header">
		<div id="nav">
			<span class="a">home</span>
			<span class="i"><a href="about.htm">about</a></span>
			<span class="i"><a href="contact.htm">contact</a></span>
		</div>
		<div id="logo">&nbsp;</div>
	</div>
	<div class="header2">
		<div class="words">
			<span style="color:#be2f37;">service</span>
			<span style="color:#fff;">education</span>
			<span style="color:#00529b;">progress.</span>
		</div>
	</div>
</div>
</body>
</html>


I also put it on my server for reference: http://labs.christra...projects/fcfbla
Was This Post Helpful? 0
  • +
  • -

#4 souptoy  Icon User is offline

  • D.I.C Head


Reputation: 54
  • View blog
  • Posts: 243
  • Joined: 17-January 08

Re: Problem centering spans in a div

Posted 12 July 2011 - 11:23 PM

This is the CSS I was able to come up with:

        body
        {
            height:100%;
        }
        #wrapper
        {
            height:100%;
            min-width: 900px;
            padding: 25px;
        }
        #header2
        {
            height:250px;
            background:#87d8e9
        }
        /*#header2Container
        {
            height:100%;   
        }*/
        #words
        {
            height:100%; /*move header2Container height here*/
            position:relative;
            top:100px;
            text-align:center;            
        }
        #words span
        {
            font-size: 48px;
        }


And this is the HTML
<div id="header2">
    <!--<div id="header2Container">-->
        <div id="words">
            <span style="color: #be2f37;">service</span>
            <span style="color: #fff;">education</span>
            <span style="color: #00529b;">progress.</span>
        </div>
    <!--</div>-->
</div>


What I've done is set the body's height to 100% so that any tags within it will have something to base their height off of. Next we set the wrapper to the entire height of the body tag. Since header2 is specifying the height of the blue background, we put another container in there with it's height set to 100% of the height of header2...this is header2container. Next we set the words container position relative to its container (header2container) and tell it to be 100px down from the top (250px - 25px padding top - 25px padding bottom = 200px / 2 = 100px) and align the text inside it to center.

Let me know if this solves your problem.

EDIT: I took out the header2Container because it's not necessary. It's a habit of mine to make containers like that. You can set the height of words to 100% and achieve the same effect.

This post has been edited by souptoy: 12 July 2011 - 11:37 PM

Was This Post Helpful? 1
  • +
  • -

#5 chrtr  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 12-July 11

Re: Problem centering spans in a div

Posted 12 July 2011 - 11:37 PM

View Postsouptoy, on 12 July 2011 - 11:23 PM, said:

This is the CSS I was able to come up with:

        body
        {
            height:100%;
        }
        #wrapper
        {
            height:100%;
            min-width: 900px;
            padding: 25px;
        }
        #header2
        {
            height:250px;
            background:#87d8e9
        }
        #header2Container
        {
            height:100%;   
        }
        #words
        {
            position:relative;
            top:100px;
            text-align:center;            
        }
        #words span
        {
            font-size: 48px;
        }


And this is the HTML
<div id="header2">
    <div id="header2Container">
        <div id="words">
            <span style="color: #be2f37;">service</span>
            <span style="color: #fff;">education</span>
            <span style="color: #00529b;">progress.</span>
        </div>
    </div>
</div>


What I've done is set the body's height to 100% so that any tags within it will have something to base their height off of. Next we set the wrapper to the entire height of the body tag. Since header2 is specifying the height of the blue background, we put another container in there with it's height set to 100% of the height of header2...this is header2container. Next we set the words container position relative to its container (header2container) and tell it to be 100px down from the top (250px - 25px padding top - 25px padding bottom = 200px / 2 = 100px) and align the text inside it to center.

Let me know if this solves your problem.


I've put your code in place on the online version of the site, and the blue box disappears and it seems to ignore the font-size setting now. :\
Was This Post Helpful? 0
  • +
  • -

#6 souptoy  Icon User is offline

  • D.I.C Head


Reputation: 54
  • View blog
  • Posts: 243
  • Joined: 17-January 08

Re: Problem centering spans in a div

Posted 12 July 2011 - 11:40 PM

Looking at your site, you're missing the CSS.

This post has been edited by souptoy: 12 July 2011 - 11:40 PM

Was This Post Helpful? 0
  • +
  • -

#7 chrtr  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 12-July 11

Re: Problem centering spans in a div

Posted 12 July 2011 - 11:45 PM

View Postsouptoy, on 12 July 2011 - 11:40 PM, said:

Looking at your site, you're missing the CSS.

Oh wow, my mistake, sorry. Thanks, it does work now, although it seems its a bit shorter on the bottom of the blue than the top. Is there a way to fix that?
Was This Post Helpful? 0
  • +
  • -

#8 souptoy  Icon User is offline

  • D.I.C Head


Reputation: 54
  • View blog
  • Posts: 243
  • Joined: 17-January 08

Re: Problem centering spans in a div

Posted 12 July 2011 - 11:47 PM

If you look at my original post, I made a correction...doubt that will make a huge difference but you can always adjust the top style to be less than 100px. Keep playing with it till it's the height that you want.
Was This Post Helpful? 0
  • +
  • -

#9 chrtr  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 12-July 11

Re: Problem centering spans in a div

Posted 12 July 2011 - 11:53 PM

View Postsouptoy, on 12 July 2011 - 11:47 PM, said:

If you look at my original post, I made a correction...doubt that will make a huge difference but you can always adjust the top style to be less than 100px. Keep playing with it till it's the height that you want.

Thanks a bunch! Saved me so many coming hours of frustration. :P
Was This Post Helpful? 0
  • +
  • -

#10 chrtr  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 12-July 11

Re: Problem centering spans in a div

Posted 13 July 2011 - 12:01 AM

Oh, and i forgot to also ask (if you don't mind), do you know of a way to be able to extend the blue box to the edge of the page without having to change the wrapper padding?

(Whoops, double-post)

This post has been edited by chrtr: 13 July 2011 - 12:02 AM

Was This Post Helpful? 0
  • +
  • -

#11 souptoy  Icon User is offline

  • D.I.C Head


Reputation: 54
  • View blog
  • Posts: 243
  • Joined: 17-January 08

Re: Problem centering spans in a div

Posted 13 July 2011 - 07:53 AM

Make the following change to your style:
#wrapper
{
    height:100%;
    min-width: 900px;
    padding: 25px 0px; 
    width:100%;
}


This tells the container to have padding-top/padding-bottom 25px and sets padding-left/padding-right to 0px;
Was This Post Helpful? 1
  • +
  • -

#12 chrtr  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 12-July 11

Re: Problem centering spans in a div

Posted 13 July 2011 - 09:21 AM

View Postsouptoy, on 13 July 2011 - 07:53 AM, said:

Make the following change to your style:
#wrapper
{
    height:100%;
    min-width: 900px;
    padding: 25px 0px; 
    width:100%;
}


This tells the container to have padding-top/padding-bottom 25px and sets padding-left/padding-right to 0px;

I actually went with the container method you seem to like, I created a "content" div after the header2 and set padding for both header and content then removed the padding from the wrapper. Thanks though!
Was This Post Helpful? 0
  • +
  • -

#13 souptoy  Icon User is offline

  • D.I.C Head


Reputation: 54
  • View blog
  • Posts: 243
  • Joined: 17-January 08

Re: Problem centering spans in a div

Posted 13 July 2011 - 09:26 AM

That works, too. There's so many ways to do something and there's no "right" way to do it. Glad to have helped!
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1