Align text in the center of
element

Question

Let me know how to align text in the center of 'p' element.

I think Aligning text in p element is not same as aligning text in div element.

<!DOCTYPE html>
        <html>
        <style>
        #element{
            background: #95CFEF;
            border: solid 1px #36F;
            width: 300px;
            height: 100px;
            margin: 10px auto;
         text-align: center;
        }
        </style>
        <body>
        <p id = "element">This is some text in a paragraph.</p>
        </body>
        </html>

Thanks in advance

https://jsfiddle.net/sri276286/w65jLzv9/

I am expecting like this:

Please find the fiddle attached and I want the text to be center of that element — srikanth_k, Jun 06 '16 at 14:30
It looks like you're asking for both vertical and horizontal alignment?. Right now you're doing horizontal alignment — Krease, Jun 06 '16 at 14:37

score 0 · Accepted Answer · answered Jun 06 '16 at 14:37

0

Why don't you try line-height: 100px;

Basically line-height should be same as your #element's height

answered Jun 06 '16 at 14:37

Saurabh Bayani

3,350
2
25
44

This worked. Thanks – srikanth_k Jun 06 '16 at 14:40
I don't have enough points to accept your answer – srikanth_k Jun 06 '16 at 14:46
1

@SrinkathReddyKarnati - yes you do, there is no points requirement to accept - that's the whole point – Krease Jun 06 '16 at 15:19

score -2 · Answer 2 · edited Jun 06 '16 at 14:34

-2

It's not id = "element", it's id="element" mind the spaces. This could fix your problem. If you meant vertical align let me know and I'll come back on that

edited Jun 06 '16 at 14:34

GreyRoofPigeon

17,833
4
36
59

answered Jun 06 '16 at 14:30

Robbin van der Jagt

796
4
15

That's not a big deal. I tried removing that space but still issue. I want that text to be exactly at center of that paragraph element – srikanth_k Jun 06 '16 at 14:33
This is not useful - Those are equivalent (the spacing change has no impact) You can prove it to yourself in a simple jsfiddle. – Krease Jun 06 '16 at 14:39

Align text in the center of element

2 Answers2

Align text in the center of
element