CODEWITHSUNDEEP
htmlcss
Dave Heart
Dave Heart

Reputation: 61

How can I center my text using Divs

I had this code and it worked good. The footer information was at the bottom of my screen in the middle:

div#footercenter p { font-size: 0.9em; }

<div id="footercenter">
  <p>&#169; XXXX </p>
</div>

I wanted to change it to this:

div#footercenter {}
div#footer-message { font-size: 0.9em; color: #EEEEEE;  display: inline;}
div#footer-copyright { font-size: 0.9em; color: #EEEEEE; display: inline; }

<div id="footercenter">
  <div id="footer-copyright">xxx</div>|
  <div id="footer-message">yyy</div>
</div>

Now my text is to the left and not in the center. Does anyone have any idea how I can make it go back to the center?

Dave

Upvotes: 0

Views: 98

Answers (6)

Ashwin Krishnamurthy
Ashwin Krishnamurthy

Reputation: 3758

Set the width for the div you wanna apply the text-align property to and then assign text-align : center.

Upvotes: 0

Brian Scott
Brian Scott

Reputation: 9361

A <div> is a block element that should be used for defining collections of elements rather than explicitly for text content. There's nothing wrong with your markup but you have set your divs to then have a display:inline which means they only occupy the width of their content. The divs will also bunch up to the left by default.

The better approach would have been to contain the text within 2 span elements and then simply set the text-align property of the parent div to center.

See the following;

div#footercenter { font-size: 0.9em; color: #EEEEEE; text-align:center; }

<div id="footercenter">
  <span>xxx</span>|
  <span>yyy</span>
</div>

Upvotes: 1

Vijay
Vijay

Reputation: 5433

Rewrite your footercenter class as 

div#footercenter {text-align:center;}

Upvotes: 0

DanielB
DanielB

Reputation: 20240

Try

div#footercenter {
  text-align:center;
}

<div id="footercenter">
  <span id="footer-copyright">xxx</span>|
  <span id="footer-message">yyy</span>
</div>

Upvotes: 0

JohnP
JohnP

Reputation: 50019

You mean like this? : http://jsfiddle.net/jomanlk/DHA9A/

You just need to add text-align to center

div#footercenter {text-align: center}

Upvotes: 2

No Results Found
No Results Found

Reputation: 102745

Should be as simple as this:

#footercenter {
    text-align:center;
}

But you may need to do this as well if you have other styles interfering:

#footercenter div {
    float:none;
    display:inline; /* or inline-block */
}

Upvotes: 1

Related Questions