如何將兩個div標籤水平對齊

好吧，我有兩個div元素，我想要垂直對齊，元素被標識爲「NavBar」和「標題」我已經嘗試多次對齊它們，但似乎沒有工作...任何幫助將是偉大的，代碼如下。如何將兩個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，您要關閉「容器」的</div>「稱號」之前，關閉它後「標題」的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標籤水平對齊

回答

相關問題