What i did wrong in this css?

Question

In the below image please take a look at the REQUEST FORM (inside green background) , it's aligned over top, instead I need to align in centered vertically

CSS style used ,

.rtitle {
background-color: Green;
width: 300px;
height: 50px;
border-radius: 25px;
font-size: 30px;
padding-right: 10px;
padding-left: 10px;
text-align: center;
font-weight: bold;
}

I need a exactly centered div style using css please help.

you should provide the HTML too. it's hard to debug when you have no idea what the markup looks like. — Scott Weaver, Mar 28 '17 at 14:48
[blog]: Visit: http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers?page=1&tab=votes#tab-top "There's a good answer here :)" — amar shimi, Mar 28 '17 at 15:00
Rather pompeus to put this on hold when there are people who actually did spend time to answer the question. — Rene van der Lende, Mar 28 '17 at 15:19

score 0 · Answer 1 · answered Mar 28 '17 at 14:48

0

The easy way to fix this is add a padding-top in your style.

answered Mar 28 '17 at 14:48

Rafael Umbelino

771
7
14

Thx . Yes padding-top and padding-bottom lines works fine. – Philip Mar 28 '17 at 15:39

score 0 · Accepted Answer · answered Mar 28 '17 at 14:49

When I use your styling on a button it is in the center. It could be some other styling that you have that does this. Or something in your html.

.rtitle {
background-color: Green;
width: 300px;
height: 50px;
border-radius: 25px;
font-size: 30px;
padding-right: 10px;
padding-left: 10px;
text-align: center;
font-weight: bold;
}

<button class="rtitle">Hello</button>

score 0 · Answer 3 · edited Mar 28 '17 at 15:00

0

Add the following in your CSS style:

button p {
margin: auto
}

And remove

text-algin:center

Plus the padding from .rtitle style and add your text between <p> </p> tag.

edited Mar 28 '17 at 15:00

devpro

16,184
3
27
38

answered Mar 28 '17 at 14:53

Mardiros Jevalian

1

Rene van der Lende · Answer 4 · 2017-03-28T15:00:52.910

The answer is quite simple, add a line-height equal to height to your class:

.rtitle {
    background-color: Green;
    width: 300px;
    height: 50px;
    border-radius: 25px;
    font-size: 30px;
    padding-right: 10px;
    padding-left: 10px;
    text-align: center;
    font-weight: bold;
    
    line-height: 50px; /* ADD */
}

<div class="rtitle">REQUEST FORM</div>

Works all the time for any font (unless you have meddled with vertical-align)

score 0 · Answer 5 · answered Mar 28 '17 at 14:57

0

You need to put the text inside into a span

Then on the span use

.span {top: 50%; position: relative; }

https://jsfiddle.net/zt31ra3k/

answered Mar 28 '17 at 14:57

DM98

83
6

What i did wrong in this css?

5 Answers5