Как сделать div-центр горизонтально с фиксированным положением?

Я хочу ДИВ быть в центре по горизонтали, CSS код заключается в следующем:Как сделать div-центр горизонтально с фиксированным положением?

<style type="text/css"> 
#footer{ 
    position: fixed; 
    bottom: 20px; 
    background-color: red; 
    width:500px; 
      margin: auto;/*left:auto; right:auto;*/ 
} 
</style>

и HTML код:

<body> 
<div id="footer">hello world</div> 
</body>

Я думаю, нет необходимости объяснять свой CSS-код, это почти сами пояснительный, но div не является центром по горизонтали, есть ли способ сделать это? Спасибо заранее.

источник

2013-04-17 hiway

позиция: фиксированная и маржа: авто; не работают хорошо, я работаю над решением для вас. –

Попробуйте этот

#footer{ 
    position: fixed; 
    bottom: 20px; 
    background-color: red; 
    width:80%; 
    margin: 0 0 0 -40%; 
    left:50%; 
}

JS Fiddle Example

Точка здесь следует отметить, есть отрицательное margin-left ровно половина значение width и установить left 50% от массы тела

источник

2013-04-17 11:32:36 Sachin

ваш ответ и @ gregbenner's оба используют этот «трюк», в первую очередь, спасибо. Я также просто искал google, а другие также используют этот способ, мне интересно, есть ли способ «trick» сделать это? – hiway

Это действительно приятное решение. Но это не совсем то, что он хочет сделать. Таким образом, нижний колонтитул станет отзывчивым и не будет иметь фиксированную ширину 500 пикселей. –

ya @Nick, но я также упомянул об этом трюке. (ы) он может легко изменять размеры, которые ему нравятся. – Sachin

Поместите еще один div внутри с относительным положением, margin: auto. Дайте фиксированную ширину 100%.

В противном случае вы можете взломать его с отрицательным запасом 'трюк'

div { 
    position: fixed; 
    left: 50%; 
    width: 500px; 
    margin-left: -250px; 
}

источник

2013-04-17 11:30:05

Это должно сработать для вас. Он работает, добавляя контейнер div.

<style> 

#footer-container{ 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    text-align: center; 
} 

#footer 
{ 
    width:500px; 
    margin:0 auto; 
    margin-bottom:20px; 
    background-color:red; 
} 
</style> 


<div id="footer-container"> 
     <div id="footer">hello world</div> 
</div>

источник

2013-04-17 11:37:59

« text-align: center; » приведет к центру текста и IE6. если вы не хотите центрировать, но, как IE6, работать. добавьте выравнивание текста: слева в div #footer. –

Если вы работаете с современными браузерами, вы можете использовать модуль макета Flexbox: http://caniuse.com/#feat=flexbox.

Flexbox документация: developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
Примечания: Не может размещать более двух ссылок из-за мою репутацию.

JSFiddle.

(Использование footer тег вместо div#footer, как это проще.)

<div id="footer-container"> 
    <footer>hello world</footer> 
<div>

#footer-container { 
    bottom: 20px; 
    position: fixed; 

    display: flex; 
    justify-content: center; 
    width: 100%; 
} 

footer { 
    width: 500px; 

    background-color: red; 
}

justify-content: center;#footer-container 'центры' «ы детей, что является только footer элементом в этом случае.

Это очень похоже на решение Ник Н., за исключением того, что вам не нужно возвращать свойство text-align на нижнем колонтитуле и что это, вероятно, не-трюк, который вы хотели.

Принятое решение слегка отключено, поскольку ширина нижнего колонтитула в этом случае является переменной (80%) вместо 500 пикселей.

Для других читателей, если ваш родитель является form элементом, и ребенок является input элементом, используйте flex: 1; на элементе input (ребенок), а также использовать max-width: 500px; вместо width: 500px;.Использование flex: 1; должно привести к тому, что элемент input развернуть, чтобы заполнить ширину элемента form, чего он, возможно, и не сделал.

источник

2014-12-25 05:09:40 xd1le

Это решение отлично работает. Должен действительно иметь способ пометить ответы как «современные браузеры», чтобы мы могли сортировать их вверх, когда поддерживали только современные браузеры. –

Как сделать div-центр горизонтально с фиксированным положением?

ответ

Смежные вопросы