Форум

riaron86 · #1 (**permalink**) 24.06.2024, 23:29

Хочу выравнить по центру см картинку особенное некрасивость выраниваие сим
фото 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%;
}

рони · #2 (**permalink**) 25.06.2024, 00:29

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>

riaron86 · #3 (**permalink**) 25.06.2024, 07:08

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

рони · #4 (**permalink**) 25.06.2024, 11:12

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

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

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

Форум

Справочник

Discord чат

Курсы javascript