Как горизонтально центрировать нефиксированную ширину div?

ОК, у меня есть DIV, который в центре:Как горизонтально центрировать нефиксированную ширину div?

<div id="spry"> 
<p> hello there asdsdfasd adsfasdf aasdfasfd </p> 
</div>

использует этот CSS:

#spry { 
background-color: red; 
display: block; 
margin-left: auto; 
margin-right: auto; 
width: 400px; 
}

Но я хочу, чтобы иметь DIV не фиксированной ширины. Я решил, что могу просто изменить width: 400px; до width: auto;

Но если вы сделаете это, оно просто расширится до всей ширины.

источник

2013-08-22 Seb Silver

Вы можете изменить это значение для отображения на 'инлайн-block', а затем использовать' выравнивания текста: центр; 'на его родителей контейнер. – Adrift

Идеальный ответ. Отправьте его как один! – Bojangles

Мне просто не нравится это делать, потому что это не очень семантично. Im центрирует div, а не текст. –

Вы можете изменить отображаемое значение для inline-block, а затем использовать text-align: center; на его родительский контейнер (хотя, так как это не один я просто использовал <body> в качестве примера):

body { 
    text-align: center; 
} 

#spry { 
    background-color: red; 
    display: inline-block; 
}

http://jsfiddle.net/3DBha/1/

источник

2013-08-22 12:03:52 Adrift

Лучший выбор, но я увидел еще один вариант где-то на SO, был использован тип 'absolute' /' relative' и играл с 'left' /' right' свойствами. Я отправлю ссылку, если найду ее. –

Это не работает, если пользователь хочет фиксированную или максимальную ширину 400 пикселей. В противном случае это хорошо. – Doidgey

Судя по названию, я не думаю, что это то, что ему нужно - и [он работает] (http://jsfiddle.net/3DBha/2/), если у вас есть фиксированная ширина – Adrift

-1

попробовать margin:0 auto; посмотреть, что происходит

источник

2013-08-22 11:58:49 SaturnsEye

Это недопустимый синтаксис. –

margin: 0 auto; был бы правильным синтаксисом в этом случае –

вы можете использовать max-width - Это по существу говорит, что не больше, чем 400pixels, но вы можете быть меньше. Попробуйте изменить размер окна.

Это хороший вариант, если вы не хотите фиксированную ширину. В качестве альтернативы вы можете попробовать процент, а затем просто используйте max-width, чтобы определить максимальную ширину, которую вы желаете.

DEMO

Вы можете увидеть ширина отображается при масштабировании, чтобы продемонстрировать

источник

2013-08-22 12:04:20 Doidgey

Как горизонтально центрировать нефиксированную ширину div?

ответ

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