Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.06.2024, 23:29
Аспирант
Отправить личное сообщение для riaron86 Посмотреть профиль Найти все сообщения от riaron86
 
Регистрация: 27.11.2021
Сообщений: 63

выравнивание 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%;
}
Ответить с цитированием
  #2 (permalink)  
Старый 25.06.2024, 00:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,085

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>
Ответить с цитированием
  #3 (permalink)  
Старый 25.06.2024, 07:08
Аспирант
Отправить личное сообщение для riaron86 Посмотреть профиль Найти все сообщения от riaron86
 
Регистрация: 27.11.2021
Сообщений: 63

не подойдет!! при вашем варианте на каждой строке 1 чекбокс
Ответить с цитированием
  #4 (permalink)  
Старый 25.06.2024, 11:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,085

Сообщение от riaron86
при вашем варианте на каждой строке 1 чекбокс
видимо мы смотрим с вами разные варианты с css.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Центр div по центру другого div) BeetleJuice541 Общие вопросы Javascript 5 03.08.2014 13:08
выравнивание div внутри div ilnurgi (X)HTML/CSS 1 03.04.2013 15:18
Выравнивание всплывающего окна по центру экрана. waw555 jQuery 2 07.09.2012 15:43
Не получается по щелчку на ссылке вывести div по центру экрана! Триви jQuery 6 11.03.2011 10:35
animate, всплывающий div box сделать по центру zero_mod jQuery 1 27.10.2010 00:23