CSS: центрирование поплавка: левый элемент в зависимости от ширины экрана?

Question

Мне нужно использовать float div (главное окно моего приложения), и я бы хотел центрировать этот плавающий DIV в зависимости от ширины экрана клиента. Как мне это сделать?

Прямо сейчас я использую левое: 20%, но это не всегда по центру в зависимости от разрешения экрана пользователя

Answer 1

Хотите, чтобы div увеличивался относительно окна браузера или помещался внутри него?

Если первое, вы можете просто использовать ширину в процентах, а не в пикселях, и она по-прежнему должна центрироваться.

Если последнее, не используйте float ... начните с установки width:auto; (я думаю, что это должно сделать его автоматически расширяемым, чтобы соответствовать контенту). Затем вам понадобится JavaScript, чтобы измерить ширину DIV, установить свойство width: css в пикселях, затем измерить окно браузера и отцентрировать контейнер на основе этих измерений.

Извините, я ошибся насчет ширины: auto ;. Я полагаю, просто поместите его, а затем используйте JavaScript, как я описал выше, чтобы вручную установить поля margin-right и margin-left.

---

Извините, придумал лучшее решение.

#float { 
    float:left;
    margin-left:50%;
    position:relative;
}

А затем, используя jquery,

$(document).ready(function() {
    var float_width = $('#float').width();
    var left_spacing = float_width / 2;

    $('#float').css('left', '-' + left_spacing);
});

Простите, если мой javascript выключен или не совсем работает ... Я не проверял это, и я Joo Noob:)

Answer 2

Я обычно использую автоцентрированный контейнерный контейнер и затем помещаю любые другие контейнеры (например, ваш плавающий тег) в этот контейнер. Есть ли какая-то конкретная причина, по которой ты не можешь этого сделать?

Пример CSS:

#container {
width: 960px;
margin: 0 auto;
position: relative;
}

Answer 3

Вы можете попробовать использовать

.mainWindow {
    margin: 0 auto;
}

затем убедитесь, что родительский элемент имеет выравнивание текста: center;