CODEWITHSUNDEEP
htmlreactjscssflexbox
cdlc
cdlc

Reputation: 323

Align horizontally two spans in the middle of a flexbox

I have a div (flex) containing 2 spans that I want to be aligned like this.

What I have now is this

Code: 

<div className="MemberLinks">
      <div>
        <span className="linkTitle">Schedule of Benefits</span>
        <span>
          <a href="./manifest.json">
            doc.pdf
          </a>
        </span>
      </div>
      <div>
        <span className="linkTitle">General Exclusions</span>
        <span>
          <a href="./manifest.json">
            doc.pdf
          </a>
        </span>
      </div>
    </div>

css:

.MemberLinks {
margin-top: 1em;
display: flex;
flex-direction: column;
}
.linkTitle {
display: inline-block;
margin: 0 .6em 0 0;
}

I want to accomplish horizontally alligned spans in the midle of them, so it stays formatted like there was a even space between elements

Upvotes: 1

Views: 1233

Answers (1)

Richard Parnaby-King
Richard Parnaby-King

Reputation: 14862

I don't think you need to use flex to achieve this effect.

What I've done is removed the flex, set the spans to have 50% width, then set the text-align property to right for the first span.

.MemberLinks {
  margin-top: 1em;
}

.MemberLinks span {
  display: inline-block;
  width: 50%;
  padding: 0 0.1em;
  box-sizing: border-box;
}

.MemberLinks span:first-of-type {
  text-align: right;
}
<div class="MemberLinks">
  <div>
    <span class="linkTitle">Schedule of Benefits</span><span>
          <a href="./manifest.json">
            manifestdoc.pdf
          </a>
        </span>
  </div>
  <div>
    <span class="linkTitle">General Exclusions</span><span>
          <a href="./manifest.json">
            otherdoc.pdf
          </a>
        </span>
  </div>
</div>

Upvotes: 3

Related Questions