CODEWITHSUNDEEP
htmlreactjspositioning
Kid
Kid

Reputation: 2205

How can I position this text in this <span> so it display in a line

I have this <span> that creates this below image output:

        <li>
            <a onClick={onSearchPageClick} role="presentation">
                <span className="icon is-medium">
                    <i className="fas fa-search" />
                </span>{' '}
                Search
            </a>
        </li>

Image output:

enter image description here

Then I have this code using span but text is under the icon:

<li>
    <a onClick={onProfilePageClick} role="presentation">
        <span className="icon is-medium">
            <i className="fas fa-user" />
        </span>{' '}
        <div>
            {authUser && Array.isArray(authUser.roles) && authUser.roles.includes(ROLES.USER) ? (
                <div>Dashboard</div>
            ) : (
                <div>Sign in</div>
            )}
    </div>
        </a>
</li>

enter image description here

Please advice how to do this I have tried for hours

Upvotes: 0

Views: 113

Answers (3)

Rob Terrell
Rob Terrell

Reputation: 2562

here is a working example: https://codesandbox.io/s/zen-sky-zh5tg?file=/src/App.js:0-531

In order to create a working example I have removed some of the logic that was posted in the original code

the code just utilizes flex box:

   <li style={{ listStyleType: "none" }}>
      <a onClick={() => console.log("clicked")} style={{ display: "flex", alignItems: "center" }}>
        <span className="icon is-medium">
          <div style={{ marginRight: 5 }}>avatar</div>
        </span>
        <div>{authUser ? <div>Dashboard</div> : <div>Sign in</div>}</div>
      </a>
    </li>

Upvotes: 1

Imran Rafiq Rather
Imran Rafiq Rather

Reputation: 8118

Don't change anything in your code. Just add these CSS flexbox properties on anchor tag.

li a{
    display:flex;
    align-items:center;
    justify-content:center;
}

In fact this will align your icon and sign in text exactly to the center both horizontally and vertically.

Upvotes: 1

Ben Rosen
Ben Rosen

Reputation: 358

The <span> tag is rendered inline, whereas the <div> tag is not. You can either use <span> or you can style your <div>, like:

<div style={{display: 'inline'}}>
   // your code goes here
</div>

Upvotes: 2

Related Questions