CODEWITHSUNDEEP
htmlcssinput
user9924086
user9924086

Reputation:

How to align a input without center the text

I have one problem.

I need help to center the input type text and email and this two should also be next to each other. Also center the input checkbox below.

It should look just as the text_box_newsletter. It need to be in the center.

I'm stuck, tried everything so now I'm only confused.

Please help a student :) thanks alot! 

.grid_newsletter .text {
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 41px;
}

.grid_newsletter input {
  width: 380px;
}

.grid_newsletter .checkbox {
  margin-top:
}

.grid_newsletter input[type="checkbox"] {
  width: 22px;
  height: 22px;
  border: 2px solid black;
}

.grid_newsletter .text_box_newsletter {
  background: white;
  width: 495px;
  height: 90px;
  text-align: center;
  margin-top: 27px;
  margin-left: auto;
  margin-right: auto;
}

.grid_newsletter .text_box_newsletter p {
  padding-top: 39px;
  padding-bottom: 35px;
  text-align: center;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.100em;
}
<div class="grid_newsletter">
  <div class="padding">
    <div class="content">
      <div class="text">Newsletter</div>
      <form>
        <input type="text" name="firstname" placeholder="förnamn">
        <input type="email" name="email" placeholder="e-post">
      </form>
      <div class="checkbox"><input type="checkbox" name="confirm"> I confirm <a href="#">Read more</a></div>
      <div class="text_box_newsletter">
        <p>skicka</p>
      </div>
    </div>

Upvotes: 1

Views: 175

Answers (5)

Gerard
Gerard

Reputation: 15796

I have used 2 flexboxes.

  1. A column to contain the input fields
  2. A row to contain the checkbox. This also allows for vertical alignment, so the text after the checkbox is neatly aligned with the center of the checkbox.

Furthermore, 2 closing divs were missing.

.grid_newsletter .text {
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 41px;
}

.grid_newsletter input {
  width: 380px;
}

.grid_newsletter .checkbox {
  margin-top:
}

.grid_newsletter input[type="checkbox"] {
  width: 22px;
  height: 22px;
  border: 2px solid black;
}

.grid_newsletter .text_box_newsletter {
  background: white;
  width: 495px;
  height: 90px;
  text-align: center;
  margin: 27px auto 0 auto;
}

.grid_newsletter .text_box_newsletter p {
  padding-top: 39px 0 35px 0;
  text-align: center;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.100em;
}


/* Added */

.grid_newsletter form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.grid_newsletter .checkbox {
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid_newsletter .checkbox a {
  margin: 0 0 0 0.5rem;
}
<div class="grid_newsletter">
  <div class="padding">
    <div class="content">
      <div class="text">Newsletter</div>
      <form>
        <input type="text" name="firstname" placeholder="förnamn">
        <input type="email" name="email" placeholder="e-post">
      </form>
      <div class="checkbox"><input type="checkbox" name="confirm"> I confirm <a href="#">Read more</a></div>
      <div class="text_box_newsletter">
        <p>skicka</p>
      </div>
    </div>
  </div>
  <!-- Added -->
</div>
<!-- Added -->

Upvotes: 0

Mehraj Khan
Mehraj Khan

Reputation: 977

You can do like this also all fields should be center aligned is better to target a div instead of target elements.

.content { text-align: center; }

Upvotes: 1

MattHamer5
MattHamer5

Reputation: 1491

Using Flexbox is a great way to do this, however, it isn't supported in older browsers (Internet Explorer), so the following will do exactly the same thing. 

form input { display:block; margin:auto;}
.checkbox { text-align:center;}

Upvotes: 0

Matt
Matt

Reputation: 1570

On the form you can use flexbox to align all items:

.your-form-selector {
    display: flex;
    justify-content: center;
}

I've tested this and it works unless I'm misunderstanding the question.

I try to avoid using text-align for block content as this may break right to left scripted languages. This shouldn't be an issue if you never plan to expand your site though.

Upvotes: 2

AKNair
AKNair

Reputation: 1587

Add these to properties and you are sorted:

form,.checkbox {
  text-align: center;
}

Upvotes: 0

Related Questions