3 replies [Last post]
gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 3 years 36 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

Quick question ,

now suppose i have the following code

<div>
    <button class="btn btn-success">startquiz</button>
</div>

to center the button horizontally , what i do is in CSS i give the following code

div{
   text-align:center;
   height:400;
}

"text-align:center;" does the trick of centering the botton inside teh div in the center , horizontally , now see that the div is actually 400px in height . how do i vertically center the button in the center ?

also One more question that is how do i make the "Div" take 100% of the screen height ? well , for this one if i have to use JS , its fine , just give me a hint as to how would i go about doing it ?

thank you.

kind regards.

gautam.

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 3 years 36 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

js fiddle

Js Fiddle

Above is a Js fiddle if it helps .

Thanks.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 6 hours 2 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Hi gautamz07 This should

Hi gautamz07
This should explain some of the principles.
Centering horizontally/vertically without scripts

div{
            height: 400px;
            text-align: center;
        }
        .btn-success{
            font-size: 20;
            padding: 10px 20px;
            position:relative;
            top:50%;
            margin-top:-1em;
 
        }

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 3 years 36 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

Tony Thanks

Thank you tony for ur always helpful answers . Smile