Вертикальное выравнивание текста в Div

im пытается создать веб-сайт, но im имеет проблемы с 2 частями; 1. Я не могу вертикально выровнять заголовок сайта по вертикали, чтобы он находился в середине div. 2. Im пытается выровнять таблицу меню с заголовком div прямо над ним и сделать его таким же, как для всех типов браузеров.Вертикальное выравнивание текста в Div

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

<!doctype html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>Game Portal</title> 
     <style> 
      body{ 
       background-color: black; 
      } 
      h1.header{ 
       font-family: "Trebuchet MS", Arial, sans-serif; 
       font-weight: bold; 
       font-size: 30px; 
       color: #fff; 
       text-transform: uppercase; 
      } 
      #headerdiv{ 
       margin: 0px auto; 
       border: 1px solid red; 
       width: 70%; 
       height: 100px; 
       padding-top:30px; 
      } 
      th, td { 
       padding: 15px; 
       table-layout: fixed; 
       width: 180px; 
       height: 75px; 
       padding: 0px; 
       border-right-style: solid; 
       border-left-style: solid; 
       border-width: 1px; 
       border-color: #808080; 
       border-collapse: collapse; 
      } 

      td { 
       text-align: center; 
       font-family:"Times New Roman", Helvetica, sans-serif; 
       font-size: 15pt; 
       border-radius:5px 
       height: 100px; 
      } 
      a{ 
       color: #808080; 
      } 
      #titleSize{ 
       font-size: 25px; 
      } 
      #nav { 
       line-height:30px; 
       background-color:#4D4D4D; 
       height:80px; 
       width:100%; 
      } 
     </style> 

    </head> 
    <body> 
     <div id="headerdiv"> 
      <h1 class="header">game<span id="titleSize">portal</span></h1> 
     </div> 
     <div id="nav"> 
      <table style="background-color: #4D4D4D; padding-left: 15%;"> 
       <tr> 
        <td><a href="">Home</a></td> 
        <td><a href="UnderConstruction.html">Games</a></td> 
        <td><a href="UnderConstruction.html">News</a></td> 
        <td><a href="UnderConstruction.html">Contact Us</a></td> 
       </tr> 
      <table> 
     </div> 

    </body> 
</html>

Я попытался Мессинг с позициями (ABS, фиксированы, относительно), а также с краями, но ничего, кажется, двигаться либо из элементов. Заранее спасибо.

источник

2015-02-25 ShadowViper

Один из способов сделать это через дополнение:

#headerdiv{ 
      width: 200px; 
      margin:0px auto; 
      border: 1px solid red; 
      width: 70%; 
      height: 70px; 
      padding-top:30px; 
    }

Здесь height был изменен, а остальные 100 были добавлены в padding-top

источник

2015-02-25 23:07:58 dwkd

что не работал :(она до сих пор не буду двигаться, он продолжает оставаться в верхнем левом углу DIV – ShadowViper

я иметь jsfiddle, чтобы доказать it :) https://jsfiddle.net/ogra96tg/ – dwkd

Я верю, что код должен работать, но по какой-то причине он не будет работать с моим кодом. – ShadowViper

Есть много способов сделать это, пример:

http://jsfiddle.net/ovLhjmwb/

Например: Является ли более легко иметь контейнер, который содержит все ребенка элементы (и дать ему ширину)

 .container { 
      width: 400px; 
      margin: auto; 
     }

Кроме того, вертикальные выровненный текст, немного трудно сделать, самый простой способ, чтобы использовать свойство вертикального выравнивания (который поставляется с элементов таблицы)

 #headerdiv table{ 
      vertical-align: middle;     
      height: 100%; 
      width: 100%; 
     }

источник

2015-02-25 23:18:51 eveevans

Так что, я думаю, есть еще несколько проблем. Например, используйте больше тегов HTML5 и не так много идентификаторов или классов. Держите DOM-дерево максимально простым. Вы получите лучшую структуру, и ваш xode станет более читаемым. Кстати, я исправил свои проблемы и в своем решении.

HTML:

<header> 
    <h1>Game<span>Portal</span></h1> 
</header> 
<nav> 
    <ul> 
    <li><a href="UnderConstruction.html">Home</a></li> 
    <li><a href="UnderConstruction.html">Games</a></li> 
    <li><a href="UnderConstruction.html">News</a></li> 
    <li><a href="UnderConstruction.html">Contact Us</a></li> 
    </ul> 
</nav>

CSS:

body{ 
    background: black; 
} 
header { 
    width: 70%; 
    display: block; 
    margin: 0 auto; 
    height: 100px; 
    border: 1px solid red; 
} 
header h1 { 
    font-family: "Trebuchet MS", Arial, sans-serif; 
    font-weight: bold; 
    font-size: 30px; 
    line-height: 30px; 
    color: white; 
    text-transform: uppercase; 
    padding-top:13px; 
} 
header h1 span { 
    font-size: 25px; 
} 
nav { 
    width:70%; 
    margin:0 auto; 
    text-align:left; 
    height: 100px; 
    background: #4D4D4D; 
} 
nav ul { 
    margin-left:-40px; 
} 
nav ul li { 
    float:left; 
    list-style-type:none; 
} 
nav ul li a{ 
    color: #808080; 
    height: 62px; 
    padding:38px 20px 0 20px; 
    border-left:1px solid #808080; 
    display: block; 
    font-size: 15pt; 
}

источник

2015-02-25 23:35:15 rahcon

как бы по вертикали выровнять текст в списке? – ShadowViper

Сделайте это с обивкой! Как вы можете видеть в моем примере. nav ul li a {padding: ....} <- фиксированная высота 62 px, а остальное - отступы. Таким образом, вся область вокруг тега a является интерактивной. – rahcon

Вертикальное выравнивание текста в Div

ответ

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