How to horizontally center div?

Question

<div style="width:100%; margin: 0 auto;">
    <div style="width:50%; background:#000">
        <p style="color:#fff">Text must be left.</p>
    </div>
</div>

Please help me How can I centrally align sub div and paragraph must be left. Please refer https://vsss.co.in/index.php/User?

Hey, can you look at https://vsss.co.in/index.php/User? – Rushabh Shah Feb 01 '18 at 13:03 — Rushabh Shah, Feb 01 '18 at 13:03
you simply added the margin in the wrong div – Temani Afif Feb 01 '18 at 13:03 — Temani Afif, Feb 01 '18 at 13:03

score 3 · Accepted Answer · answered Feb 01 '18 at 12:59

3

You must add margin:0 auto to the element you need to center.

<div style="width:100%; margin: 0 auto;">
    <div style="width:50%; margin:0 auto; background:#000">
        <p style="color:#fff">Text must be left.</p>
    </div>
</div>

answered Feb 01 '18 at 12:59

Suthan Bala

3,209
5
34
59

Hey, can you look at https://vsss.co.in/index.php/User? – Rushabh Shah Feb 01 '18 at 13:02
@SuthanBala , are you see `vsss.co.in/index.php/User`? your answer dont help to Bala.questioner use of margin: 0 auto already. – Ehsan Feb 01 '18 at 13:15
@RushabhShah sorry just looked at it, where do you want me to see? BTW, when you use `margin:0 auto;` a width must also be present to that element. – Suthan Bala Feb 01 '18 at 13:50
@RushabhShah if you are referring to `.sign-in-page` div, that div has 100% width, so you won't see the effect. If you change the width to something lower, you will see it centering – Suthan Bala Feb 01 '18 at 13:51

How to horizontally center div?

1 Answers1