Как получить два тега div для выравнивания по горизонтали

Итак, у меня есть два элемента div, которые я хочу выровнять по вертикали, элементы обозначаются как «NavBar» и «title». Я несколько раз пытался их выровнять, но ничего не кажется работа ... Любая помощь будет отличной, а код ниже.Как получить два тега div для выравнивания по горизонтали

Вот код:

body { 
 
    background-color: black; 
 
} 
 
div.NavBar { 
 
\t color: blue; 
 
\t background-color: white; 
 
\t text-align: center; 
 
\t max-width: 25%; 
 
\t min-width: 140px; 
 
\t flex: 1; 
 
} 
 
div.title { 
 
\t color: purple; 
 
\t text-align: center; 
 
\t 
 
} 
 
div.container { 
 
\t display: flex; 
 
}

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <link rel='shortcut icon' href='favicon.png' type='image/png'/ > 
 
     <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
 
     <title>Bobby The Death Mage</title> 
 
     <script src="code.js" type="text/javascript" charset="utf-8"></script>   
 
     <link href="style.css" rel="stylesheet" type="text/css"> 
 
\t </head> 
 
\t <body> 
 
\t <div class="container"> 
 
\t \t \t <div class="NavBar"> 
 
\t \t \t \t <h1>Nav Bar<BR>---------------</h1> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <div class="title"> 
 
\t \t \t \t <h1>Site Title<BR>--------------------------------------------</h1> 
 
\t \t </div> 
 
\t </body> 
 
</html>

источник

2016-09-13 lecidious

Coul Вы объясните, что именно вы хотите сделать? – aavrug

div class = "Nav Bar"> означает, что у вас есть 2 класса 1 - это «Nav», а secend - «Bar» где ваш .help div ??
означает разрыв строки –

Добавьте '' 'float: left''' в первый div, который имеет класс контейнера. – aavrug

Если вы хотите, чтобы выровнять 2 дивы по горизонтали, вы закрывание </div> из «контейнера» до «титула», закройте его после того, как "название" деление с блок https://jsfiddle.net/L9n8jf2y/

<div class="container"> 
    <div class="help"> 
    <h1>Nav Bar</h1> 
    </div> 
    <div class="title"> 
    <h1>Site Title</h1> 
    </div> 
</div>

источник

2016-09-13 03:55:25 JapanGuy

этот помог спасибо за помощь, теперь как бы установить 10px-пространство между ними? я бы просто использовал margin-left: 10px; ? – lecidious

@ классный технически, да, но я обновил скрипку, посмотри. Думаю, это правильный способ сделать это. Легко менять цвета и т. Д. Если в коде есть какая-либо строка, которую вы не понимаете, сообщите мне – JapanGuy

div { 
 
    text-align: center 
 
}

<!DOCTYPE html> 
 
    <html> 
 
    \t <head> 
 
    \t \t <link rel='shortcut icon' href='favicon.png' type='image/png'/ > 
 
      <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
 
      <title>Bobby The Death Mage</title> 
 
      <script src="code.js" type="text/javascript" charset="utf-8"></script>   
 
      <link href="style.css" rel="stylesheet" type="text/css"> 
 
    \t </head> 
 
    \t <body> 
 
    \t <div class="container"> 
 
    \t \t \t <div class="Nav Bar"> 
 
    \t \t \t \t <h1>Nav Bar<BR>---------------</h1> 
 
    \t \t \t </div> 
 
    \t \t </div> 
 
    \t \t <div class="title"> 
 
    \t \t \t \t <h1>Site Title<BR>--------------------------------------------</h1> 
 
    \t \t </div> 
 
    \t </body> 
 
    </html>

источник

2016-09-13 03:56:09 MotKohn

закрыть контейнер DIV после NavBar .. поэтому в зависимости от вашего кода здесь ответ просто поместите конец контейнера DIV после названия класса/DIV> закрыть и добавить дополнительный класс в контейнер класса div- https://jsfiddle.net/exwbfxa8/1/

body { 
 
    background-color: black; 
 
} 
 
div.v_align { 
 
    display: inline-flex; 
 
} 
 
div.NavBar { 
 
    color: blue; 
 
    background-color: white; 
 
} 
 
div.title { 
 
    color: purple; 
 
    text-align: center; 
 
}

<div class="container v_align"> 
 
    <div class="NavBar"> 
 
    <h1>Nav Bar--------------</h1> 
 
    </div> 
 

 
    <div class="title"> 
 
    <h1>Site Title----------------------</h1> 
 
    </div> 
 
</div>

источник

2016-09-13 04:22:28

Как получить два тега div для выравнивания по горизонтали

ответ

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