Remove From My Forums

How to show centered my search form textbox

Question

User1991482975 posted

Hi i try to make a centered search form, which is a simple textbox with a button on the right..

This is my code,but my textbox is shown on the left.. how to fix this in order to show centered?

only the H3 is on the center.. why?

html :

    <div class="mb-menu-search mb-mn" style="display:none !important;">
        <div class="mb-menu-close">
            <a href="#" id="show-mb-menu-close-search">
                <div><span class="glyphicon glyphicon-remove"></span></div>
            </a>
        </div>
        <div class="txtc">
            <h3>Trouver un emplois dans la coiffure</h3>
          </div>
        <form action="Creation/Index" class="txtc" id="search" method="get">
            <input type="text" value="" placeholder="search text here" class="src-txb" /><button class="src-btn"><i class="glyphicon glyphicon-map-marker"></i></button>
        </form>
    </div>

css :

.mb-mn {
    z-index: 1000;
    ;
    left: 0px;
    width: 100%;
    height: 100%;
    top: 0px;
    background-color: #00438b;
    -webkit-box-shadow: 0px 4px 8px 0px rgba(170, 170, 170, 0.50);
    -moz-box-shadow: 0px 4px 8px 0px rgba(170, 170, 170, 0.50);
    box-shadow: 0px 4px 8px 0px rgba(170, 170, 170, 0.50);
}
    .mb-mn h3 {
        font-size: 25px !important;
        color: #fff;
    }

/* Search MENU */
.mb-menu-search {
    font-size: 21px !important;
}
    .mb-menu-search a {
        font-size: 21px !important;
        color: #fff;
    }
        .mb-menu-search a:hover {
            color: #d6eaff;
            text-decoration: none;
        }
.mb-menu-close-search {
    z-index: 1000;
    ;
    right: 0;
    margin-top: 5px;
    margin-right: 5px;
    float: right;
    font-size: 42px !important;
}




/* Style search */
.src-txb {
    display: block;
    float: left;
    height: 44px;
    width: 100%;
    border: 1px solid #e2e2e2 !important;
    padding: 11px 14px; /* Some padding */
    border-bottom-left-radius: 15px;
    -moz-border-radius-bottomleft: 15px;
    -webkit-border-bottom-left-radius: 15px;
    border-top-left-radius: 15px;
    -moz-border-radius-topleft: 15px;
    -webkit-border-top-left-radius: 15px;
}
.src-txb:focus {
    outline: none;
}
.src-btn {
    display: block;
    float: left;
    height: 44px;
    margin: 0px -2px -2px;
    width: 46px;
    background-color: #00438b; /* Blue background */
    border: 1px solid #e2e2e2 !important;
    color: white; /* White text */
    padding: 11px 14px; /* Some padding */
    font-size: 17px; /* Set a font size */
    cursor: pointer; /* Mouse pointer on hover */
    border-bottom-right-radius: 15px;
    -moz-border-radius-bottomright: 15px;
    -webkit-border-bottom-right-radius: 15px;
    border-top-right-radius: 15px;
    -moz-border-radius-topright: 15px;
    -webkit-border-top-right-radius: 15px;
}
    .src-btn:hover {
        background-color: #0063CC;
        border: 1px solid #0063CC !important;
    }


/* Align right  */
.txtr {
    text-align: right;
}

Friday, March 1, 2019 10:27 AM

Answers

0

Sign in to vote
User-2054057000 posted

I explain you how to center something in simple terms.

For example suppose a div contains your form like this:

<div class="container"> <div class="centerDiv"> // your form </div> </div>

Note that the div centerDiv contains the form and you will be centering this div so that the form will be at the center of container div.

For this you will be adding this CSS to your stylesheet:

.centerDiv { width: 200px; margin: auto; }

Notice the margin: auto given to the centerDiv and this will do the work.

More info on reference tutorial here.

So you need to do this change only:

<div class="mb-menu-search mb-mn" style="display:none !important;width: 200px; margin: auto;"> //...

And I hope it will do your work.

Regards.
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Friday, March 1, 2019 12:31 PM

Answered by:

How to show centered my search form textbox

Question

Answers