Question

好吧所以我有两个div元素，我想垂直对齐，元素被标识为“NavBar”和“title”我已经多次尝试对齐它们但似乎什么都没有用......任何帮助都会很棒代码如下。

以下是代码：

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

<!DOCTYPE html>
<html>
	<head>
		<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">
	</head>
	<body>
	<div class="container">
			<div class="NavBar">
				<h1>Nav Bar<BR>---------------</h1>
			</div>
		</div>
		<div class="title">
				<h1>Site Title<BR>--------------------------------------------</h1>
		</div>
	</body>
</html>

Answer 1

如果要水平对齐2个div，则在“title”之前关闭“{1}}”容器“，在”title“div块https://jsfiddle.net/L9n8jf2y/

之后关闭它

</div>

Answer 2

div {
  text-align: center
}

    <!DOCTYPE html>
    <html>
    	<head>
    		<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">
    	</head>
    	<body>
    	<div class="container">
    			<div class="Nav Bar">
    				<h1>Nav Bar<BR>---------------</h1>
    			</div>
    		</div>
    		<div class="title">
    				<h1>Site Title<BR>--------------------------------------------</h1>
    		</div>
    	</body>
    </html>

Answer 3

你在NavBar之后关闭了容器div ..所以根据你的代码，这里的答案就是把容器div结束放在class title / div＆gt;之后关闭并在容器类div- https://jsfiddle.net/exwbfxa8/1/

中添加一个额外的类

＆＃13;

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

＆＃13;

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

＆＃13;

如何使两个div标签水平对齐

3 个答案: