How to Center a span in between two floating spans and the container is fixed?

Question

I'm working on header section where there are 3 spans, one floating to the left, one floating to the right and the other span in the middle. The middle span is not getting horizontally aligned no matter what.

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>

Man, u have only 2 spans tags in your html:) where is third?) and in my chrome browser your middle span-element is centered perfect:)and 1 more thing - u add .name element absolute position, it means this element is relevant to its container. — Vasyl Gutnyk, Apr 24 '17 at 18:17

score 0 · Answer 1 · edited May 31 '17 at 21:28

I would use left: 50%. Here. I this what you wanted:

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%;
}

<!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>

If I use `left:50%`, it is starting from half but not getting centered. — , Apr 24 '17 at 18:17
@sharath this question has been asked before so it doesn't need an upvote. Technically, I should be downvoting it and marking it as duplicate... [See.](http://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div-in-another-div) — Sank6, Apr 24 '17 at 18:21

score 0 · Answer 2 · answered Apr 24 '17 at 18:20

Here is a simpler solution. Wrap them in a parent div and make the width equal. Take a look at the following:

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>

Why there is a `font-size:0`? If I remove that it won't work. — , Apr 24 '17 at 18:29

How to Center a span in between two floating spans and the container is fixed?

2 Answers2