Link to home
Start Free TrialLog in
Avatar of brettr
brettr

asked on

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

Avatar of kaufmed
kaufmed
Flag of United States of America image

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

SOLUTION
Avatar of COBOLdinosaur
COBOLdinosaur
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Sorry kaufmed, I should have refreshed; or typed faster.

Cd&
Avatar of brettr
brettr

ASKER

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.
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of brettr

ASKER

@IanTh

I tried the code you pasted but don't see that anything is being centered.
do you have a separate css file ?
Avatar of brettr

ASKER

No.  I'm trying the code stand alone as I pasted it for the simplest scenario.
what browser are you testing it on I think there used to be a align:center for a div but that's deprecated
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of brettr

ASKER

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?

User generated image
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?

User generated image
[edit]

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

[/edit]
Avatar of brettr

ASKER

You can see in your screenshot that the input boxes and button still aren't centered.
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&
Avatar of brettr

ASKER

What do you mean by "those"?

It looks the same in the tool or in a browser.
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I think on mc-emdeb you will need to setup padding to push it to the middle
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