Блог

Главная - Вопросы по программированию - Возможно ли центрировать div с неопределенной шириной, который содержит два плавающих div также с неопределенной шириной

Возможно ли центрировать div с неопределенной шириной, который содержит два плавающих div также с неопределенной шириной

#centering #floating

#центрирование #плавающий

Вопрос:

Я пытаюсь расположить два элемента рядом внутри div или другого элемента, чтобы оба элемента всегда были центрированы на странице.

Вот в чем загвоздка… Я не могу использовать фиксированную ширину, она динамически генерируется javascript. Из чтения других сообщений может показаться, что это невозможно без фиксированной ширины, но я хотел посмотреть, есть ли у кого-нибудь другие идеи для достижения того же результата.

HTML:

 <body>
    <div class="centerdiv">
        <div class = float1></div>
        <div class = float2></div>
    </div>
</body>

CSS:

 body {text-align: center; width: 100%;}
.centerdiv {margin: 0 auto;width: 100%}
div.float1 {float:left; display:inline;}
div.float2 {float:left; display:inline;}

Ответ №1:

Вы можете использовать следующий код для центрирования div рядом.

 <html>
<head>
    <style type="text/css">
    body {text-align: center; width: 100%;}
    .centerdiv {margin: 0 auto;width: 100%;margin-left:40%;}

    .float1{border:1px solid black;width:10%;float:left;}
    </style>
    </head>

<body>
    <div class="centerdiv">
        <div class = float1>Hello</div>
        <div class = float1>Hai</div>
    </div>
</body>
</html>

Надеюсь, это поможет!!!!!!

Комментарии:

1. При таком, но интересном подходе плавающие элементы перекрываются в правой трети окна.