Unable to center cutouts in base zone

Question

This is probably pretty easy, but I tried many different approaches and can't get this bloody callout to the center.

<div class="row"> <div class="large-12 small-12 center columns"> <div class="radius panel large-4 small-4 columns"> <div class="row"><input id="loginUserInput" name="loginUserInput" type="text" value="Username" /></div> <div class="row"><input id="loginPasswordInput" name="loginPasswordInput" type="password" value="Password" /></div> </div> </div> </div> 

CSS

 .center { margin: auto; text-align: center; } 

Here's the jsfiddle:

http://jsfiddle.net/Sgwtd/

Answer 1

If you want to focus this challenge on the foundation, since you are already using it, then large-centered is your friend

 <div class="radius panel large-4 small-4 columns large-centered"> 

If you want it to be focused both on the desktop and in mobile mode, you can add small-centered

 <div class="radius panel large-4 small-4 columns small-centered large-centered"> 

Answer 2

Add

 float:none; margin: auto; 

for the callout element <div class="radius panel large-4 small-4 columns">

There is a basic request for media that floats to the left. You might even want to add an identifier to this div and add the above styles instead to prevent overwriting any potential occurrences in objects that should be placed.

Answer 3

Your .center class can only align text, but as I see it, in your div you have two more divs with row classes and input fields inside. So, if you want to center your input fields - you need to change

 .center { text-align: center; } 

to

  .center { margin-left: auto; margin-right: auto; } 

I hope I understand you correctly.

Answer 4

Add this to your stylesheet:

 .center .panel { margin: 0 auto; float: none; } 

You must disable the float that applies to the .columns class .columns that margin: 0 auto; worked as expected.