Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.83/6: Рейтинг темы: голосов - 6, средняя оценка - 4.83
nhelp
0 / 0 / 0
Регистрация: 25.05.2014
Сообщений: 8
1

Выравнивание контента по центру окна браузера

25.05.2014, 19:57. Просмотров 1181. Ответов 10
Метки нет (Все метки)

Добрый день.
Мне нужно выравнять все по центру экрана. Т.е. и по вертикали и по горизонтали. По типу сайта ya.ru
У меня область поиска и снизу текст. Все нужно по центру. Я смог только по горизонтали выравнять и то, применилось только к форме поиска.

Подправьте, пожалуйста, код, чтобы все было по центру. Очень желательно все в этом коде, т.к. хотелось бы один html-файл, т.к. хостинг бесплатный и их с натяжкой дает загружать.

Спасибо



Код
<table>
<style>
   table {
       margin: auto;
   }
  </style>
<table cellspacing=2 cellpadding=4 border=0><tr><td align=center style="border:0px solid #eeeeee" bgcolor=FFB30A>
<table cellspacing=0 cellpadding=1 border=0><tr>
<form  method=post action="http://site.ru/script.php">
<td>&nbsp;&nbsp;<input style="color:#777777; font-size:11px; width:300px; font-family: Verdana, Arial, sans-serif" name="searchstr" size="12" title="поиск" onblur="this.value=(this.value=='')?this.title:this.value;" onfocus="this.value=(this.value==this.title)?'':this.value;" /></td>
<td><input type=submit style="font-size:xx-small; font-family: Verdana, Arial, Helvetica, sans-serif;" alt="найти" height=18 width=18 value=найти></td>
</form>
</tr></table></table>
 
<table>
<style>
   table {
       margin: auto;
   }
  </style>
<font color=gray size=1 face=verdana>1. строка один
2. строка 2
3. строка 3</font></table>
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
25.05.2014, 19:57
Ответы с готовыми решениями:

Выравнивание изображения по центру окна браузера
На странице должна быть отображена лишь картинка с неизвестными размерами (то...

Вертикальное выравнивание по центру в окне браузера
Добрый день! Делаю адаптивный сайт. Он имеет статическую картинку у div'a, сам...

Выравнивание родительского блока по центру без затрагивания контента внутри него
Верстал раньше на html 4 без применения &lt;div&gt; обходился таблицами и...

Как сделать выравнивание всплывающего окна по центру (по оси Y)?
Есть pop-up на jQuery, который открывается по клику. Блок с информацией этого...

Выравнивание блоков по центру, независимо от маштаба окна в браузере
я начинающий верстальщик, позиционирую все блоки через - position: absolute;...

10
kvant355
42 / 42 / 25
Регистрация: 21.07.2013
Сообщений: 309
25.05.2014, 20:13 2
как вариант можно вот так сделать
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 <head>  
       
    <title>
    </title>  
    <style>
   table {
       margin: auto;
   }  
  </style>
  </head>  
  <body>   
 
    <center><table>
 
<table cellspacing=2 cellpadding=4 border=0><tr><td align=center style="border:0px solid #eeeeee" bgcolor=FFB30A>
<table cellspacing=0 cellpadding=1 border=0><tr>
<form  method=post action="http://site.ru/script.php">
<td>&nbsp;&nbsp;<input style="color:#777777; font-size:11px; width:300px; font-family: Verdana, Arial, sans-serif" name="searchstr" size="12" title="поиск" onblur="this.value=(this.value=='')?this.title:this.value;" onfocus="this.value=(this.value==this.title)?'':this.value;" /></td>
<td><input type=submit style="font-size:xx-small; font-family: Verdana, Arial, Helvetica, sans-serif;" alt="найти" height=18 width=18 value=найти></td>
</form>
</tr></table></table> 
 
<table>
 
<font color=gray size=1 face=verdana>1. строка один
2. строка 2
3. строка 3</font></table>
</table></center> 
 
   
  </body>
0
nhelp
0 / 0 / 0
Регистрация: 25.05.2014
Сообщений: 8
25.05.2014, 20:20  [ТС] 3
У меня вот как получается:
Выравнивание контента по центру окна браузера


Текст так и остался слева, а нужно его под поиск. И по центру браузера нужно.

Т.е. вот так
Выравнивание контента по центру окна браузера


Комментарий администратора TaatshiЗагружайте изображения и файлы на форум и прикрепляйте к сообщению.
http://www.cyberforum.ru/about-forum/thread103521.html#post594251
0
kvant355
42 / 42 / 25
Регистрация: 21.07.2013
Сообщений: 309
25.05.2014, 20:25 4
а обязательно все таблицами должно быть? мне кажется проще блоками все сделать
0
N1LEX
1 / 1 / 2
Регистрация: 27.05.2013
Сообщений: 39
25.05.2014, 20:27 5
<body style="margin:0 auto;">
0
nhelp
0 / 0 / 0
Регистрация: 25.05.2014
Сообщений: 8
25.05.2014, 20:31  [ТС] 6
kvant355, нет, без разницы как, мне главное чтобы выглядело, как на картинке.
0
kvant355
42 / 42 / 25
Регистрация: 21.07.2013
Сообщений: 309
25.05.2014, 21:10 7
вот

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 <head>  
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
     <title>
    </title>  
   <style>
   #content {
     margin: 0 auto;
     width: 400px;
   } 
   
   #spisok li {
     list-style-type: none;
   }
   
   #forma {
     width: 400px;
     height: 50px;
     background: #FFB30A;
   }
   
   .vvod {
     margin-top: 15px;
     margin-left: 20px;
   }
  </style>
  </head>  
  <body>   
 
    <div id="content">
      <div id="forma">
 
        <form  method=post action="http://site.ru/script.php">
          <input class="vvod" style="color:#777777; font-size:11px; width:300px; font-family: Verdana, Arial, sans-serif" name="searchstr" size="12" title="поиск" onblur="this.value=(this.value=='')?this.title:this.value;" onfocus="this.value=(this.value==this.title)?'':this.value;" />
          <input class="button" type=submit style="font-size:xx-small; font-family: Verdana, Arial, Helvetica, sans-serif;" alt="найти" height=18 width=18 value=найти>
        </form>
      </div>
        <ul id=spisok>
          <li>1. строка один</li>
          <li>2. строка 2</li>
          <li>3. строка 3</li>
        </ul>
      
    </div>
   
  </body>
0
nhelp
0 / 0 / 0
Регистрация: 25.05.2014
Сообщений: 8
25.05.2014, 21:59  [ТС] 8
kvant355, у меня почему-то выравнялось по центру, но не по вертикальному центру.
И можно ли как-то сделать, чтобы список был без отступа. Т.е. выравнивание по началу формы поиска?
0
Миниатюры
Выравнивание контента по центру окна браузера  
wLight
38 / 38 / 22
Регистрация: 27.04.2014
Сообщений: 131
25.05.2014, 22:47 9
Лучший ответ Сообщение было отмечено nhelp как решение

Решение

nhelp,
центрирование
CSS
1
#content {margin: 25% auto;}
отступ
CSS
1
ul {padding-left: 0px;}
0
kvant355
42 / 42 / 25
Регистрация: 21.07.2013
Сообщений: 309
25.05.2014, 22:47 10
Лучший ответ Сообщение было отмечено nhelp как решение

Решение

тогда так

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<head>  
    <title>
    </title>  
   <style>
   #main {
     position: relative;
     padding: 0;
     margin: 0; 
     width: 100%;
     height: 100%;
   }
   
   #content {
     position: absolute;
     width: 400px;
     height: 130px;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     margin: auto;
   } 
   
   #spisok {
     padding: 0;
   }
   
   #spisok li {
     list-style-type: none;
   }
   
   #forma {
     width: 400px;
     height: 50px;
     background: #FFB30A;
   }
   
   .vvod {
     margin-top: 15px;
     margin-left: 20px;
   }
  </style>
  </head>  
  <body>   
   <div id="main">
    <div id="content">
      <div id="forma">
 
        <form  method=post action="http://site.ru/script.php">
          <input class="vvod" style="color:#777777; font-size:11px; width:300px; font-family: Verdana, Arial, sans-serif" name="searchstr" size="12" title="поиск" onblur="this.value=(this.value=='')?this.title:this.value;" onfocus="this.value=(this.value==this.title)?'':this.value;" />
          <input class="button" type=submit style="font-size:xx-small; font-family: Verdana, Arial, Helvetica, sans-serif;" alt="найти" height=18 width=18 value=найти>
        </form>
      </div>
        <ul id=spisok>
          <li>1. строка один</li>
          <li>2. строка 2</li>
          <li>3. строка 3</li>
        </ul>
      
    </div>
   </div>
0
nhelp
0 / 0 / 0
Регистрация: 25.05.2014
Сообщений: 8
25.05.2014, 22:55  [ТС] 11
wLight, kvant355,
спасибо, все как я хотел!
0
25.05.2014, 22:55
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
25.05.2014, 22:55

Как выравнить центр изображения по центру окна браузера?
Есть сайт: r2-shop.ru Там есть слайдер, который центрируется с помощью...

Выравнивание кнопок при изменении размеров окна браузера
Вопрос такой: На главной странице есть три кнопки, которые стоят в ряд, внутри...

как отцентрировать сайт по центру окна браузера при изменении маштаба
У меня такая проблемма: делаю сайт и когда в Google Chorme изменяю (уменьшаю)...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
11
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru