How to centre a div within a bootstrap column?

Question

I have a column, and inside that column, a set of 4 headings wrapped in a div. I would like this div to be centred, however can only get it so the start of the text is at the midpoint - I would like to subtract half of the width of this div, whilst keeping all of the headings starting at the same place:

<header>
    <div>
        <div class="row justify-content-center">
            <div class="col-md-5">
                <div  style="margin-left: 50%;">
                    <h3>> 1</h3>                
                    <h3>> 2</h3>
                    <h3>> 3</h3>
                    <h3>> 4</h3>                
                    <h3>> 5</h3>
                    <h3>> 6</h3>
                </div>
            </div>
        </div>
    </div> 
</header>

The row itself, and the column, is centred (horizontally aligned) in the page - but I want the contents of that column to be centred.

@G-Cyrillus Neither of those suggestions work unfortunately. — S.Stevens, Nov 18 '20 at 17:29

score 1 · Answer 1 · answered Nov 18 '20 at 17:57

here is a possible example...

/* show me horizontal center */
body {background:linear-gradient(to left, pink 50%, hotpink 50%)}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<header>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-5 d-flex ">
                <div  class="mx-auto">
                    <h3>> 1</h3>                
                    <h3>> 2</h3>
                    <h3>> 3</h3>
                    <h3>> 4</h3>                
                    <h3>> 5</h3>
                    <h3>> 6</h3>
                </div>
            </div>
        </div>
    </div> 
</header>

How to centre a div within a bootstrap column?

1 Answers1