Question

Here is the MasterPage.master file:

<%@ Master Language="C#" AutoEventWireup="true" 
CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="css/style.css" media="all" />

</head>
<body>
    <form id="form1" runat="server">
    <div id="div1">

    </div>
    <div id="div2">
    </div>
    <div id="div3">
        <a href="" id="a1">Home</a> <br />
        <a href="" id="a2">Contact Us</a> <br />
        <a href="" id="a3">Login</a>
    </div>
</form>

and here is the css file:

body
{
    background-color: aquamarine;
}

#div1
{
    height:300px;
    width: 300px;
    border: 2px solid red;
}

#div2
{
    height: 300px;
    width: 1314px;
    border: 2px solid red;
    position: absolute;
    left: 314px;
    top: 15px;
}

#div3
{
    height: 500px;
    width: 300px;
    border: 2px solid darkmagenta;
    text-align:center;
}

#a1
{
}

#a2
{
}

#a3
{
}

I want "Home" text have to top of div3 and centered with some top margin, Contact us should be middle of div3 and centered and Log in should be bottom of div3 and centered with some bottom margin. I applied some css property like position: absolute, margin, top etc but can't do what I want.

Answer 1

这看起来是使用CSS Flexbox的好地方。将Flexbox属性添加到设置#div3样式的区域。要在链接周围添加边距，您可以在此选择器内添加margin属性：#div3 a（尽管我建议向其中每个添加一个类，然后为该类设置样式）。

body
{
  background-color: aquamarine;
}

#div1
{
  height:300px;
  width: 300px;
  border: 2px solid red;
}

#div2
{
  height: 300px;
  width: 1314px;
  border: 2px solid red;
  position: absolute;
  left: 314px;
  top: 15px;
}

#div3
{
  height: 500px;
  width: 300px;
  border: 2px solid darkmagenta;

  /* Flexbox properties */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

#div3 a {
  /* Apply a margin around each link */
  margin: 1rem;
}

<form id="form1" runat="server">
    <div id="div1">
    </div>
    <div id="div2">
    </div>
    <div id="div3">
        <a href="" id="a1">Home</a> <br />
        <a href="" id="a2">Contact Us</a> <br />
        <a href="" id="a3">Login</a>
    </div>
</form>

<a> tag is not moving in asp.net master page

1 个答案: