• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 360
  • Last Modified:

How to center content?

How can I get all of the content below to center?  

In the div mc_embed_signup, why does text-align:center have no effect?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<title></title>
	</head>
	<body>

<!-- Begin MailChimp Signup Form -->
<link href="http://cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
<div id="mc_embed_signup" style="background:#f8f8f8;text-align:center;width:500px;">
<form action="" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<label for="mce-EMAIL">Just sign up to our newsletter to receive your free copy of our latest ebook and content.</label>
<input type="text" value="" name="FNAME" class="email" id="mce-FNAME"placeholder="first name" required style="width:200px;">
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required style="width:200px;"><div><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button" style="width:200px;"></div>
</form>
</div>
<!--End mc_embed_signup-->
	</body>
</html>

Open in new window

0
brettr
Asked:
brettr
  • 6
  • 5
  • 4
  • +1
4 Solutions
 
käµfm³d 👽Commented:
Try adding "margin: auto;" to your style:

<div id="mc_embed_signup" style="background:#f8f8f8;text-align:center;width:500px; margin: auto;">

Open in new window

0
 
COBOLdinosaurCommented:
If you are trying to center it in the page then do it this way:

<div id="mc_embed_signup" style="background:#f8f8f8;text-align:center;width:500px; margin:auto;">

If that does not solve it post a link to the page so we can see if the obsolete doctype or something else is part of the problem.

Cd&
0
 
COBOLdinosaurCommented:
Sorry kaufmed, I should have refreshed; or typed faster.

Cd&
0
Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

 
brettrAuthor Commented:
Sorry - it's actually the content in the gray box I'd like to center, not center against the page.  Right now, the interior content is left aligned.
0
 
IanThCommented:
you might need a div within mc_embed

and in css set the inner div as centered and put the form in the inner div

and mc-emded in css as 1024 pixels  

so

<!-- Begin MailChimp Signup Form -->
<link href="http://cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
<div id="mc_embed_signup" style="background:#f8f8f8;text-align:center;width:500px;">
<div id="inner_mc" style="text-align:center;">
<form action="" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<label for="mce-EMAIL">Just sign up to our newsletter to receive your free copy of our latest ebook and content.</label>
<input type="text" value="" name="FNAME" class="email" id="mce-FNAME"placeholder="first name" required style="width:200px;">
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required style="width:200px;"><div><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button" style="width:200px;"></div>
</form>
</div>
</div>
<!--End mc_embed_signup-->
      </body>
</html>
0
 
brettrAuthor Commented:
@IanTh

I tried the code you pasted but don't see that anything is being centered.
0
 
IanThCommented:
do you have a separate css file ?
0
 
brettrAuthor Commented:
No.  I'm trying the code stand alone as I pasted it for the simplest scenario.
0
 
IanThCommented:
what browser are you testing it on I think there used to be a align:center for a div but that's deprecated
0
 
käµfm³d 👽Commented:
What "gray box"? I see a gray button. Are you referring to the text, "Just sign up..."? If so, have you tried adding a text-align to the label instead?

<label for="mce-EMAIL" style="text-align: center;">Just sign up to our newsletter to receive your free copy of our latest ebook and content.</label>

Open in new window

0
 
brettrAuthor Commented:
A gray box surrounds the content.  Not sure why you can't see it.   background:#f8f8f8 creates it.  I've attached a screenshot with preview in Taco HTML Edit.

Adding that style to the label does center the text.  But how do I also center the two input boxes and button?

preview
0
 
käµfm³d 👽Commented:
Ah. Opera is not showing it for some reason--I assume the style isn't quite proper--but I can see it in IE. Have you tried the <label> suggestion?

Screenshot
[edit]

It is there in Opera. It's just so light that it's easy to miss!

[/edit]
0
 
brettrAuthor Commented:
You can see in your screenshot that the input boxes and button still aren't centered.
0
 
COBOLdinosaurCommented:
preview in Taco HTML Edit

Preview mode in a tool is not the place to assess presentation.  

It needs to be in a page and rendered by a browser.  Just looking at a code fragment in a  tool will not tell you how it renders in the real world. You also have all kinds of ids and classes. Is the tool applying those or just what is in the fragment?

Cd&
0
 
brettrAuthor Commented:
What do you mean by "those"?

It looks the same in the tool or in a browser.
0
 
käµfm³d 👽Commented:
Use the 2nd <div> approach suggested by IanTh, but put a "margin: auto;" and a width on that <div>:

...
<div id="mc_embed_signup" style="background:#f8f8f8;text-align:center;width:500px;">
<div style="margin: auto; width: 50%;">
...
</div>
</div>
...

Open in new window

0
 
IanThCommented:
I think on mc-emdeb you will need to setup padding to push it to the middle
0
 
IanThCommented:
padding will work as well if you have a div that is say 100 pixels wide and you add padding of 100 pixels the elements are 200 from the left assuming float left
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

  • 6
  • 5
  • 4
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now