Как горизонтально центрировать DIV

Как я могу горизонтально центрировать DIV с помощью текстового поля и кнопки на этом URL:http://tinyurl.com/d4lpyh5?

С Уважением, Kevin

 Brian Warshaw21 мая 2012 г., 20:20
На какие браузеры вы ориентируетесь?
 j0869121 мая 2012 г., 20:28
В вашем HTML есть несколько ошибок, начиная с отсутствия типа документа. Попробуйте очистить это сначала, а затем работайте над позиционированием.

Ответы на вопрос(3)

<center>
<input type="text" />
</center>

+ Изменить

<div style="margin-left: auto; margin-right: auto;">

в

<div style="margin-left: auto; margin-right: auto;width: 700px;">

Редактировать: Если вы сделаете это таким образом, вам придется изменить ширину входных элементов на фиксированное значение пикселя вместоwidth: 30%;

и margin-right: автоматически делить оставшуюся ширину пополам между ними, в результате чего элемент центрируется. Это делает вас намного ближе, но это еще не все. (И, к сожалению, это даже не меняет внешний вид, хотя это и правильно.)

Причина, по которой этот элемент неlook по центру еще есть элемент по умолчанию на всю ширину контейнера / экрана. Таким образом, чтобы горизонтальное центрирование работало, вам нужно не только указать левые и правые авто поля, но и пойти дальше и явно установить ширину элемента.

Хотелось бы иметь возможность указать что-то вроде «ширина: минимально необходимая»; поэтому он будет автоматически подстраиваться под все, что в нем содержится ... но в CSS такого нет. Единственный способ, который я знаю, - это явно указать ширину элемента так, чтобы его содержимое имело смысл.

Так, например, ниже приведен пример изменения вашего кода, который выглядит как мое понимание того, что вы хотите (здесь, вероятно, есть дополнительный тег & lt; div & gt ;, и вы, вероятно, хотите включить эту информацию в таблицу стилей ... но вы получаете идея):

<html>
<head>
<title>Page</title>
<link rel="stylesheet" href="http://145.120.12.115/project/css/main.css"></link>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<div class="top"></div>
<div class="search">
    <div style="margin-left: auto; margin-right: auto; width: 40ex;">
      <input type="text" id="q" name="q" value="" style="width: 30ex;"/>
      <input type="submit" class="blueButton button" value="Search" />
    </div>
</div>
</body>
</html>

Ваш ответ на вопрос