How Do You Center Multiple Elements in a Single Line on Screen?-CodePudding

I want to be able to retain the margin between the boxes and have a single line of these squares with 3 maximum on screen, but no matter what command I put in they do not center. I have tried everything I can think of and I am at a loss. If someone could help me with this and explain why it was not working, I would be extremely grateful.

I have tried using display, position, align-item, align-content, etc, all to no avail. I have even tried to edit things such as margin to make sure all elements are centered at all times with a maximum of 3 squares on screen, but this did not work either.

Code (HTML, CSS)

    <div> <!-- Cadet Info Animation -->
        <div class = 'cadetsAnimation'>
            <div class = 'cadetBox'>
                <div class = 'cadetNameBox'>
                    <p class = 'cadetName'>Battalion Commander Lieutenant Colonel</p>
                </div>
            </div>
            <div class = 'cadetBox'>
                <div class = 'cadetNameBox'>
                    <p class = 'cadetName'>Battalion XO Major</p>
                </div>
            </div>
            <div class = 'cadetBox'>
                <div class = 'cadetNameBox'>
                    <p class = 'cadetName'>Battalion NCO Command Sergeant Major</p>
                </div>
            </div>
            <div class = 'cadetBox'>
                <div class = 'cadetNameBox'>
                    <p class = 'cadetName'>Battalion S1 Captain</p>
                </div>
            </div>
            <div class = 'cadetBox'>
                <div class = 'cadetNameBox'>
                    <p class = 'cadetName'>Battalion S2 Captain</p>
                </div>
            </div>
            <div class = 'cadetBox'>
                <div class = 'cadetNameBox'>
                    <p class = 'cadetName'>Battalion S3 Captain</p>
                </div>
            </div>
            <div class = 'cadetBox'>
                <div class = 'cadetNameBox'>
                    <p class = 'cadetName'>Battalion S4 Captain</p>
                </div>
            </div>
            <div class = 'cadetBox'>
                <div class = 'cadetNameBox'>
                    <p class = 'cadetName'>Battalion S5 Captain</p>
                </div>
            </div>
            <div class = 'cadetBox'>
                <div class = 'cadetNameBox'>
                    <p class = 'cadetName'>Battalion S6 Captain</p>
                </div>
            </div>
        </div>
    </div>

.cadetsAnimation {
    position: relative;
    margin: 50px;
    left: 50%;
    transform: translate(-50%, 0%);
}

.cadetBox {
    position: relative;
    display: inline-block;
    width: 400px;
    height: 400px;
    margin: 5px;
    background-color: #2148a8;
    transition: 1s;
    z-index: 1;
}

.cadetNameBox {
    position: absolute;
    width: 100%;
    height: 50px;
    top: 350px;
    left: 50%;
    transform: translate(-50%, 0%);
    background-color: #0e0e0e;
    opacity: 90%;
    z-index: 2;
}

.cadetName {
    position: relative;
    display: inline-block;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Montserrat', sans-serif;
    font-size: 20rem;
    color: #ffffff;
    z-index: 3;
}

CodePudding user response：

Write the margin as below, maybe it will be correct. margin: 5px auto;

CodePudding user response：

add a class='container' in the first div, and you can use this CSS: I removed some of the transitions and font-size as those were getting in my way, you can still use them.

.container {
    display: flex;
    width: 100%;
    justify-content: center;
}

.cadetsAnimation {
    display: flex;
    align-items: center;
    gap: 5px;
    max-width: 1250px;
    flex-wrap: wrap;
}

.cadetBox {
    display: flex;
    align-items: center;
    width: 400px;
    height: 400px;
    background-color: #2148a8;
}

.cadetNameBox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    background-color: #0e0e0e;
    opacity: 90%;
}

.cadetName {
    font-family: 'Montserrat', sans-serif;
    color: #ffffff;
}