Stuck. Trying to use CSS to left, center, and right text within a Header tag

Question

Trying to left/center/right these 3 spans of text within a HEADER tag? No luck, please see picture.

   <body>
        <header>
        <span>503.984.9317</span>
        <span>beller.jeff@gmail.com</span>
        <span>portland, or</span>
        </header>   


body {
        background-color: pink;
    }
    
    header {
        background-color: green;
        width: 600px;
        height: 40px;
        margin: auto;
    }
    
    span {
        background-color: yellow;
    }

score 0 · Answer 1 · answered Jun 24 '22 at 07:33

Using flexbox should do the work quite efficiently but in case you don't want to use it and rely on positioning only.

body {
  background-color: pink;
}

header {
  background-color: green;
  width: 600px;
  height: 40px;
  margin: auto;
}

span {
  background-color: yellow;
}

.info {
  position: relative;
}

.info>* {
  position: absolute;
  display: inline-block;
}

.info span:nth-child(3) {
  right: 0;
}

.info span:nth-child(2) {
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%)
}

.info span:nth-child(1) {
  left: 0;
}

<header>
  <div class="info">
    <span>503.984.9317</span>
    <span>beller.jeff@gmail.com</span>
    <span>portland, or</span>
  </div>
</header>

score 0 · Answer 2 · answered Jun 24 '22 at 07:56

I would suggest you to use flexbox as it is the optimum way to position items. But as you don't want to use flexbox, I found an alternative way to position your elements using floats. NOTE: this is not recommended to use. I am just showing an alternative way just for you.

body {
background-color:pink;
}

header{
  background-color:yellow;
  padding:5px;
  text-align:center;
}

span{
  display:inline-block;
  padding:0px 20px;
}

.span1{
  float:left;
}

.span3{
  float:right;
}

<header>
        <span class="span1"><p>503.984.9317</p></span>
       <span class="span2"><p>beller.jeff@gmail.com</p></span>
        <span class="span3"><p>portland, or</p></span>
</header>

score -1 · Answer 3 · answered Jun 24 '22 at 06:03

-1

Add this style to your header class and check the output.

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

answered Jun 24 '22 at 06:03

Afif Ur Rehman

19
1

score -1 · Answer 4 · answered Jun 24 '22 at 06:25

Best ally for these cases in CSS can certainly be the flexbox and its amazing properties. Go ahead and take a look at this approach playing with the flex container (header) and its children(spans) known as flex items in FlexBox. Read more on Flexbox in this article.

body {
    background-color: pink;
}

header {
    background-color: green;
    width: 600px;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
}

span {
    background-color: yellow;
    width: 33.33%;
    height: 100%;
    justify-content: center; 
    display: inline-flex;
    align-items: center;
  padding: 0px 10px 0px;
}

span:first-child {
    justify-content: flex-start; 
}

span:last-child{
    justify-content: flex-end; 
}

<header>
        <span>503.984.9317</span>
        <span>beller.jeff@gmail.com</span>
        <span>portland, or</span>
        </header>

Stuck. Trying to use CSS to left, center, and right text within a Header tag

4 Answers4