Question

我正在处理标题部分，其中有3个跨度，一个浮动到左侧，一个浮动到右侧，另一个浮动在中间。无论如何，中间跨度都没有水平对齐。

body{
  font-family: Myriad Set Pro;
  margin: 0;
}


/* ===================== Header Section =============================*/
#header{
  width: 100%;
  position: fixed;
  height: 75px;
  line-height: 75px;
  box-shadow: 5px 5px 5px #edeff2;
  text-align: center;
}

#position{
  float: right;
  margin-right: 10px;
  /*width: 20px;*/
  /*margin-top: -75px;*/
}

#logo{
  float: left;
  height: inherit;
}

#logo:hover{
  cursor: pointer;
}

#name{
  border: 1px solid black;
  position: absolute;
  margin: 0px auto;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Dash Html</title>
    <link rel="stylesheet" type="text/css" href="dash.css">
  </head>
  <body>

    <div id="header">
      <a href="https://www.google.com" target="_blank">
        <img src="abc.png" id="logo">
      </a>
      <span id="position"> Developer Developer </span>
      <span id="name">SKSV</span>

    </div>

  </body>
</html>

Answer 1

我会使用left: 50%。这里。我这就是你想要的：

＆＃13;

body{
  font-family: Myriad Set Pro;
  margin: 0;
}


/* ===================== Header Section =============================*/
#header{
  width: 100%;
  position: fixed;
  height: 75px;
  line-height: 75px;
  box-shadow: 5px 5px 5px #edeff2;
  text-align: center;
}

#position{
  float: right;
  margin-right: 10px;
  /*width: 20px;*/
  /*margin-top: -75px;*/
}

#logo{
  float: left;
  height: inherit;
}

#logo:hover{
  cursor: pointer;
}

#name{
  border: 1px solid black;
  position: absolute;
  margin: 0px auto;
  left: 50%;
}

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Dash Html</title>
    <link rel="stylesheet" type="text/css" href="dash.css">
  </head>
  <body>

    <div id="header">
      <a href="https://www.google.com" target="_blank">
        <img src="abc.png" id="logo">
      </a>
      <span id="position"> Developer Developer </span>
      <span id="name">SKSV</span>

    </div>

  </body>
</html>

＆＃13;

Answer 2

这是一个更简单的解决方案。将它们包裹在父div中并使宽度相等。看看以下内容：

body{
  font-family: Myriad Set Pro;
  margin: 0;
}


/* ===================== Header Section =============================*/
#header{
  width: 100%;
  position: fixed;
  height: 75px;
  line-height: 75px;
  box-shadow: 5px 5px 5px #edeff2;
  text-align: center;
  font-size:0;
}
.header-col
{
  display:inline-block;
  width:33.3333333334%;
  vertical-align:middle;
  font-size:13px;
}
#position{
  display:block;
  text-align:right;
}

#logo{
display:block;
text-align:left;
}


#name{
  border: 1px solid black;
  display:block;
  text-align:center;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Dash Html</title>
    <link rel="stylesheet" type="text/css" href="dash.css">
  </head>
  <body>

    <div id="header">
      <div class="header-col">
        <a href="https://www.google.com" target="_blank" id="logo">
        <img src="abc.png">
      </a>
      </div>
      <div class="header-col">
        <span id="name">SKSV</span>
      </div>
      <div class="header-col">
         <span id="position"> Developer Developer </span>
      </div>
    </div>

  </body>
</html>

如何在两个浮动跨距之间居中并且容器是固定的？

2 个答案: