CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Usman Shahid
Usman Shahid

Reputation: 302

Why cant I center this?

This is killing me. https://leadcheetah.com/dummy.php - Not sure why I can't center the input box and submit button. I've tried using bootstrap columns and manually adding align="center"

<div class="search-container" style="transform: translateY(0px);">

                <!-- Form -->
                <h2 align="center">Search Finder Tool</h2>
                <form method="POST" action="email-extract/email-extractor-service.php" id="findemail">
                <input type="text" align="center" name="domain" id="domain" class="ico-01" placeholder="i.e. cnn.com" value=""><br><br><br>
        <p><input type="submit" class="button" value="Find Emails"></p>
                </form>

                <!-- Browse Jobs
                <div class="browse-jobs">
                    Browse job offers by <a href="browse-categories.html"> category</a> or <a href="#">location</a>
                </div> -->


            </div>

Upvotes: 0

Views: 83

Answers (3)

LKG
LKG

Reputation: 4192

.search-container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

form {
  display: flex;
  justify-content: center;
  flex-flow: row wrap;
  align-items: center;
}

p {
  margin: 0;
}
<div class="search-container">

  <!-- Form -->
  <h2 align="center">Search Finder Tool</h2>
  <form method="POST" action="email-extract/email-extractor-service.php" id="findemail">
    <input type="text" align="center" name="domain" id="domain" class="ico-01" placeholder="i.e. cnn.com" value=""><br><br><br>
    <p><input type="submit" class="button" value="Find Emails"></p>
  </form>

  <!-- Browse Jobs
                <div class="browse-jobs">
                    Browse job offers by <a href="browse-categories.html"> category</a> or <a href="#">location</a>
                </div> -->


</div>

fiddle link with bootstrap

Button out from form and input and button inline center. I added a parent div for form and button so please check html also.

Edit as your requirement

Upvotes: 1

Mitch
Mitch

Reputation: 1394

Without the use of Flexbox (as it's not supported in many browsers)

Your markup should look similar to the following

<form method="POST" action="email-extract/email-extractor-service.php" id="findemail" style="width: 100%;text-align: center;margin: auto;">
    <input type="text" align="center" name="domain" id="domain" class="ico-01" placeholder="i.e. cnn.com" value="">
    <input type="submit" class="button" value="Find Emails">
</form>

Adjusted styles

#findemail {
    width: 100%;
    text-align: center;
    margin: auto;
}

Remove the float:left and margin-right: 2% from .search-container input and add margin: auto; to it.

Result

Edit: Also, make sure to remove the <br> tags.

Upvotes: 1

Tphil
Tphil

Reputation: 43

On all components that you wish to center, ensure there are the following styles and that they are not being over-ridden.

margin-right: auto;
margin-left: auto;

Also noticed that there is a float:left; that will have to be removed from the CSS.

Hope it helps.

Upvotes: 0

Related Questions