垂直对齐中间不工作，超链接混淆格式？

时间：2018-04-13 15:45:40

标签： html css

我希望三个链接框中的文本在中间垂直对齐 - 但是由于某种原因他们不会赢？

我也希望这三个运动选项中的每一个都是整个div，成为一个可点击的盒子。我做过＃马拉松＆＃34; div可点击，但它弄乱了对齐

这两个问题是什么？

＆＃13;
＆＃13; 
*{
   margin: 0;
   padding: 0;
   }/*
   border: 0;
   outline: 0;
   font-size: 100%;
   vertical-align: baseline;
   background: transparent;
   }*/
html,
body {
   height:100%;
   width: 100%;
}
.parent-container {
   min-height:100%;
   width: 100%;
   position:relative;
   background: black;
   text-align: center;

   margin: 0 auto;

}
.child-container{
   margin: 0 auto;
   width: 80%;
   height: 60%;
   display:flex;
   justify-content: center;
   left: 10%;
   top: 20%;
   background: black;
   position: absolute;
   flex-direction: column;
   align-items: center;
   border-radius: 0%;
   border: 2px solid #39ff14 ;
   font-family: 'Montserrat';
}
.Marathon {
   top: 17.5%;
   height: 10%;
   width: 50%;
   border: 2px solid #39ff14 ;
   margin-top: auto;
}
.Marathon:hover{
   background: grey;
}
.Hockey:hover{
   background: grey;
}
.Cycling:hover{
   background: grey;
}
.Hockey {
   border: 2px solid #39ff14 ;
   width: 50%;
   height: 10%;
   top: 45%;margin-top: auto;
}
.Cycling {
   height: 10%;
   width: 50%;
   border: 2px solid #39ff14 ;
   top: 72.5%;
   margin-top:auto;
   margin-bottom:auto;
}
 h1{
   color:#39ff14;
   font-family: 'Nunito';
   padding-top: 5%;
   text-align: left;
   margin-left: 10%;
}
a{
   text-decoration: none;
}
.child-container a{
   color: #39ff14;
   text-decoration: none;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}
＆＃13; 
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="refresh" content="5">
	<link type="text/css" rel="stylesheet" href="Styles.css" />
	<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" />
	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
	<title>My Map App</title>
</head>
<body>

<div class="parent-container"> 
	<h1>My Map App</h1>
	<div class="child-container">
				<a href="marathon.php"><div class="Marathon">Marathon</div></a>
				<div class="Hockey"><a href="hockey.php">Hockey</a></div>
    			<div class="Cycling"><a href="cycling.php">Cycling</a></div>
    		
		</div>
	
</div>









</body>
</html>
＆＃13;
＆＃13;
＆＃13;

此外，我希望我的网络应用能够很好地显示在我的手机上。目前，我的网络应用程序很好地显示在我的电脑上，但当我在手机上打开时，标题为“我的地图应用程序”＃34;很小！我该如何解决这个问题？

提前致谢 PS，对此非常新！

3 个答案:

答案 0 :(得分：0)

你应该删除曲棍球，骑自行车和马拉松的所有个人风格。并将其添加到您的df = pd.DataFrame([[None, "3R01GM110382-03S1", "College of Arts and Sciences", "Chemistry", "Mary", "mary@gsu.edu"]], columns=["AwardAmount", "AwardNumber", "College", "Department", "Name", "Email"]) (df.rename(columns={'AwardNumber': 'noticeNumber'}) .to_dict(orient="records")) # [{'Department': 'Chemistry', 'Name': 'Mary', 'AwardAmount': None, 'noticeNumber': '3R01GM110382-03S1', 'College': 'College of Arts and Sciences', 'Email': 'mary@gsu.edu'}] 样式：

.child-container

虽然我不会推荐一些如此通用的东西，但链接的更全局风格可能如下所示：

flex-direction: column;
align-items: center;

最后，将此添加到文档的头部，以便移动设备不会缩小：
.child-container > * { padding: 12px 10%; border: solid 2px #39ff14; min-width: 150px; margin-bottom: 20px; }

答案 1 :(得分：0)

您的代码有一个小的语法错误。确保跟踪标签。在这种情况下，div标签被意外地放置在html的马拉松部分中的锚标签之后。如果你有一个html元素的错误 - 去那个类看看为什么它与其他的不同。

＆＃13;
＆＃13; 
*{
   margin: 0;
   padding: 0;
   }/*
   border: 0;
   outline: 0;
   font-size: 100%;
   vertical-align: baseline;
   background: transparent;
   }*/
html,
body {
   height:100%;
   width: 100%;
}
.parent-container {
   min-height:100%;
   width: 100%;
   position:relative;
   background: black;
   text-align: center;

   margin: 0 auto;

}
.child-container{
   margin: 0 auto;
   width: 80%;
   height: 60%;
   display:flex;
   justify-content: center;
   left: 10%;
   top: 20%;
   background: black;
   position: absolute;

   border-radius: 0%;
   border: 2px solid #39ff14 ;
   font-family: 'Montserrat';
}
.Marathon {
   padding: 0;
   position: absolute;
   top: 17.5%;
   height: 10%;
   width: 50%;
   border: 2px solid #39ff14 ;
   color: #39ff14;
   vertical-align: middle;
   margin-top: auto;
   border-radius: 0%;
}
.Marathon:hover{
   background: grey;
}
.Hockey:hover{
   background: grey;
}
.Cycling:hover{
   background: grey;
}
.Hockey {
   padding: 0;
   position: absolute;
   top: 45%;
   height: 10%;
   width: 50%;
   border: 2px solid #39ff14 ;
   color: #39ff14;
   vertical-align: middle;
   margin-top: auto;
   border-radius: 0%;
}
.Cycling {
   padding: 0;
   position: absolute;
   top: 72.5%;
   height: 10%;
   width: 50%;
   border: 2px solid #39ff14 ;
   color: #39ff14;
   vertical-align: middle;
   margin-top: auto;
   border-radius: 0%;
}
.parent-container h1{
   color:#39ff14;
   font-family: 'Nunito';
padding-top: 5%;
text-align: left;
margin-left: 10%;

}
a{
   text-decoration: none;
}
.child-container a{
   color: #39ff14;
   text-decoration: none;
}
＆＃13; 
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="refresh" content="5">
	<link type="text/css" rel="stylesheet" href="Styles.css" />
	<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" />
	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
	<title>My Map App</title>
</head>
<body>

<div class="parent-container"> 
	<h1>My Map App</h1>
<div class="child-container">
			<div class="Marathon"><a href="marathon.php">Marathon</a></div>
			<div class="Hockey"><a href="hockey.php">Hockey</a></div>
			<div class="Cycling"><a href="cycling.php">Cycling</a></div>
		
	</div>
	
</div>









</body>
</html>
＆＃13;
＆＃13;
＆＃13;

您可能想要更改框样式以使它们看起来更漂亮。

至于移动与桌面问题，请看：

http://webdesignerwall.com/tutorials/responsive-design-in-3-steps

答案 2 :(得分：0)

这个超级简单的事情怎么样？ 

<a>                      //This will act as your button container
  <p>Cycling</p>         // Here goes the name
</a>

将Button的样式赋予<a>，因此它将用作按钮。

  

保持CSS尽可能简单。

* {
  background: black;
}

.parent-container {
  margin: 40px;
}

.parent-container h1 {
  font-size: 30px;
  color: #39ff14;
}

.child-container {
  display: flex;
  flex-direction: column;
  border: 2px solid #39ff14;
  padding-top: 20px;
}

.child-container a {
  flex: 1;
  border: 2px solid #39ff14;
  margin: 0px auto 20px auto;
  width: 30%;
  text-decoration: none;
}

.Marathon {
  text-align: center;
  color: #39ff14;
  margin: 0;
  height: 40px;
  line-height: 40px;
}

.Hockey {
  color: #39ff14;
  text-align: center;
  margin: 0;
  height: 40px;
  line-height: 40px;
}

.Cycling {
  color: #39ff14;
  text-align: center;
  margin: 0;
  height: 40px;
  line-height: 40px;
}
<div class="parent-container">
  <h1>My Map App</h1>
  <div class="child-container">
    <a href="marathon.php">
      <p class="Marathon">Marathon</p>
    </a>
    <a href="hockey.php">
      <p class="Hockey">Hockey</p>
    </a>
    <a href="cycling.php">
      <p class="Cycling">Cycling</p>
    </a>
  </div>
</div>

相关问题
最新问题