Javascript-форум - выравнивание div по центру

Javascript-форум (https://javascript.ru/forum/)

- (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)

- - выравнивание div по центру (https://javascript.ru/forum/xhtml-html-css/85953-vyravnivanie-div-po-centru.html)

выравнивание div по центру

Хочу выравнить по центру см картинку особенное некрасивость выраниваие сим
фото https://ibb.co/8Kkgjzr

<div className="chxxx" >
<H4>HELLO</H4>
<div className="chkxxes">
<div className='chckxes' >
            <div>{props.named}</div>
            <div><input type="checkbox" name={props.mname}/></div>
        </div>
<div className='chckxes' >
            <div>{props.named}</div>
            <div><input type="checkbox" name={props.mname}/></div>
        </div><div className='chckxes' >
            <div>{props.named}</div>
            <div><input type="checkbox" name={props.mname}/></div>
        </div>
</div>

<H4>HELLO</H4>
<div className="chkxxes">
<div className='chckxes' >
            <div>{props.named}</div>
            <div><input type="checkbox" name={props.mname}/></div>
        </div>
<div className='chckxes' >
            <div>{props.named}</div>
            <div><input type="checkbox" name={props.mname}/></div>
        </div><div className='chckxes' >
            <div>{props.named}</div>
            <div><input type="checkbox" name={props.mname}/></div>
        </div>
</div>
<H4>HELLO</H4>
<div className="chkxxes">
<div className='chckxes' >
            <div>{props.named}</div>
            <div><input type="checkbox" name={props.mname}/></div>
        </div>
<div className='chckxes' >
            <div>{props.named}</div>
            <div><input type="checkbox" name={props.mname}/></div>
        </div><div className='chckxes' >
            <div>{props.named}</div>
            <div><input type="checkbox" name={props.mname}/></div>
        </div>
</div>
<H4>HELLO</H4>
<div className="chkxxes">
<div className='chckxes' >
            <div>{props.named}</div>
            <div><input type="checkbox" name={props.mname}/></div>
        </div>
<div className='chckxes' >
            <div>{props.named}</div>
            <div><input type="checkbox" name={props.mname}/></div>
        </div><div className='chckxes' >
            <div>{props.named}</div>
            <div><input type="checkbox" name={props.mname}/></div>
        </div>
</div>

</div>

h4{
    font-size: 16px;
    text-align: center;

}
div.chxxx{
    text-align: center;
}
div.chckxes{
    font-size: 14px;
    float: left;
    display:inline-block;
    text-align: center;
    margin: 3px;
    left:50%;
}

riaron86,

<!DOCTYPE HTML>
<html>

<head>
    <title>Untitled</title>
    <style type="text/css">
        h4 {
            font-size: 16px;
            text-align: center;

        }

        div.chxxx {
            text-align: center;
        }

        div.chckxes {
            font-size: 14px;
            text-align: center;
            margin: 3px;
            left: 50%;
        }

        div.chkxxes {
            display: flex;
            justify-content: center;
        }
    </style>
</head>

<body>
    <div class="chxxx">
        <H4>HELLO</H4>
        <div class="chkxxes">
            <div class='chckxes'>
                <div>{props.named}</div>
                <div><input type="checkbox" name={props.mname}/></div>
            </div>
            <div class='chckxes'>
                <div>{props.named}</div>
                <div><input type="checkbox" name={props.mname}/></div>
            </div>
            <div class='chckxes'>
                <div>{props.named}</div>
                <div><input type="checkbox" name={props.mname}/></div>
            </div>
            <div class='chckxes'>
                <div>{props.named}</div>
                <div><input type="checkbox" name={props.mname}/></div>
            </div>
            <div class='chckxes'>
                <div>{props.named}</div>
                <div><input type="checkbox" name={props.mname}/></div>
            </div>
        </div>
        <H4>HELLO</H4>
        <div class="chkxxes">
            <div class='chckxes'>
                <div>{props.named}</div>
                <div><input type="checkbox" name={props.mname}/></div>
            </div>
            <div class='chckxes'>
                <div>{props.named}</div>
                <div><input type="checkbox" name={props.mname}/></div>
            </div>
            <div class='chckxes'>
                <div>{props.named}</div>
                <div><input type="checkbox" name={props.mname}/></div>
            </div>
        </div>
        <H4>HELLO</H4>
        <div class="chkxxes">
            <div class='chckxes'>
                <div>{props.named}</div>
                <div><input type="checkbox" name={props.mname}/></div>
            </div>
            <div class='chckxes'>
                <div>{props.named}</div>
                <div><input type="checkbox" name={props.mname}/></div>
            </div>
            <div class='chckxes'>
                <div>{props.named}</div>
                <div><input type="checkbox" name={props.mname}/></div>
            </div>
        </div>
        <H4>HELLO</H4>
        <div class="chkxxes">
            <div class='chckxes'>
                <div>2x SIM</div>
                <div><input type="checkbox" name={props.mname}/></div>
            </div>
            <div class='chckxes'>
                <div>1x SIM</div>
                <div><input type="checkbox" name={props.mname}/></div>
            </div>
        </div>
    </div>
</body>

</html>

не подойдет!! при вашем варианте на каждой строке 1 чекбокс

Цитата:

Сообщение от riaron86

при вашем варианте на каждой строке 1 чекбокс

видимо мы смотрим с вами разные варианты с css.