Link to home
Create AccountLog in
Avatar of brettr
brettr

asked on

How to override CSS?

How do I center the content here:

http://www.cygen.com/test/signup.html

It looks like things are left aligned because of [mc_embed_signup][form] from the style sheet?  I added

style="text-align:center;"

to the form tag.  I also wrapped that section in a dev that centers.  Neither have any effect.
SOLUTION
Avatar of tankergoblin
tankergoblin

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Avatar of brettr
brettr

ASKER

Tried that in both places.  No luck.
Avatar of Dave Baldwin
The MailChimp CSS <link href="http://cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css"> is setting it to align-left.  If you want to do something else, don't use their CSS.
Avatar of brettr

ASKER

I should be able to override their CSS inline, which is the original question.
Then you need to do it in <div id="mc_embed_signup"> .
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<title></title>
	</head>
	<body>
	<div style="margin-left: auto; margin-right: auto;">
	<!-- Begin MailChimp Signup Form -->

<link href="http://cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
<style type="text/css">
	#mc_embed_signup{background:#fff; clear:left;width:400px;}
	/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
	   We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup" style="margin-left: auto; margin-right: auto;">
<form action="http://bitesizebschool.us5.list-manage1.com/subscribe/post?u=f27f671242f9376d66eb9034e&amp;id=a5f924c1e8" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" style="margin-left: auto; margin-right: auto;" target="_blank" novalidate>
	<label for="mce-EMAIL">Sign up!</label>
	<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
	<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</form>
</div>
<!--End mc_embed_signup-->
</div>
	</body>
</html>

Open in new window

Avatar of brettr

ASKER

Ok, that's better.  It moved the content center of the page.  I probably wasn't clear in the OP.  How do I get the content to center where it is now?  It is still left aligned.  I did try adding a

  text-align:center

to the mc_embed_signup  div but it had no effect:

<div id="mc_embed_signup" style="margin-left: auto; margin-right: auto;text-align:center;">
ASKER CERTIFIED SOLUTION
Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account