Menu icon Foundation
How do I center this div?

So I have a div that is like this:

http://puu.sh/p6dfW/df46bb5fc3.png

I want to center the login form

I've tried using the offset. Here is the code:

<div class="row">

			<div id='login' class="large-6 callout text-center">
				<h1>Login</h1>
				<input type="text" name="username" id="usernameIn" />
				<input type="password" name="password" id="passwordIn" />
			</div>
			

	<!-- footer div is here -->
</div>

The earlier code was nested: (and is was a column then), but it would be off by a few pixels on the sides of the footer.

<div class="row">
    <div class="large-12">
      <div class="row">
			<div id='login' class="large-6 callout column text-center">
				<h1>Login</h1>
				<input type="text" name="username" id="usernameIn" />
				<input type="password" name="password" id="passwordIn" />
			</div>
			

	<!-- footer div here -->
</div>

 

So I how would I go about to center it in the middle, as a large-6 but moved.

 

centeringcenterdivs

So I have a div that is like this:

http://puu.sh/p6dfW/df46bb5fc3.png

I want to center the login form

I've tried using the offset. Here is the code:

<div class="row">

			<div id='login' class="large-6 callout text-center">
				<h1>Login</h1>
				<input type="text" name="username" id="usernameIn" />
				<input type="password" name="password" id="passwordIn" />
			</div>
			

	<!-- footer div is here -->
</div>

The earlier code was nested: (and is was a column then), but it would be off by a few pixels on the sides of the footer.

<div class="row">
    <div class="large-12">
      <div class="row">
			<div id='login' class="large-6 callout column text-center">
				<h1>Login</h1>
				<input type="text" name="username" id="usernameIn" />
				<input type="password" name="password" id="passwordIn" />
			</div>
			

	<!-- footer div here -->
</div>

 

So I how would I go about to center it in the middle, as a large-6 but moved.

 

Val Ery over 3 years ago

This example is suitable? - http://codepen.io/Val_Ery/pen/oLvrbL

Jackson over 3 years ago

 Yes it worked, I tried it with position: relative earlier, it worked good on desktop, phone nope.

Thanks!