CODEWITHSUNDEEP
javascripthtmlcss
Evan Root
Evan Root

Reputation: 57

Not able to get input field at the center of the screen

I have an input field in my JSP page and want it to be at the center of the screen but even after trying various methods its not happening . The div containing the input looks like this 

<div class="text-center" id="keywordSelect">
    <div class="text-center">
        <p style='text-align:center'>
            <input type="text" class="form-control" id="keyword" name="name" placeholder="Enter Keyword" style='width:30em;display:block'>
        </p>
    </div>
    <div class="text-center">
	    <button type="button" class="btn btn-success" id="keyword_button">View</button>
    </div>
</div>

Upvotes: 0

Views: 44

Answers (2)

Lalji Tadhani
Lalji Tadhani

Reputation: 14169

add margin:0 auto

<input type="text" class="form-control" id="keyword" name="name"
                    placeholder="Enter Keyword" style='width: 30em; display: block; margin:0 auto;'>

Upvotes: 1

Sanjay
Sanjay

Reputation: 2503

Try This code.it will display your field at center of screen.

<div class="text-center" id="keywordSelect" align="center">
        <div class="text-center">
            <p>
                <input type="text" class="form-control" id="keyword" name="name"
                    placeholder="Enter Keyword" style='width: 30em; display: block'>
            </p>
        </div>
        <div class="text-center">
            <button type="button" class="btn btn-success" id="keyword_button">View</button>
        </div>
    </div>

Upvotes: 3

Related Questions