CODEWITHSUNDEEP
htmlcssreactjsinline
ianwt
ianwt

Reputation: 109

react - left corner logo list of links off center with inline

I am trying to have a list of links centered in the middle of the page. using this setup, it is slightly to the right, why is this the case? I think that my left corner logo is pushing them off-center, as the logo, list of links, and profile link are all on the same horizontal plane. However, I want the links to be centered regardless of how big the logo is. How can I fix it?

import React from 'react';
import './header.css';

function CornerPiece(props) {
  return (
    <div>
      { props.value}
    </div>
  )
}

class Header extends React.Component {
  render() {
    return (
      <div id="menu-outer">
        <div class="alignleft">
          <CornerPiece
            value={<h2>ThisIsMyLogo</h2>} /></div>
        <div class="alignright">
          <CornerPiece
            value={<h3>Profile</h3>} /></div>
        <div id="navcontainer">
          <ul>
            <li><a href="#">Milk</a></li>
            <li><a href="#">Eggs</a></li>
            <li><a href="#">Cheese</a></li>
          </ul>
        </div>
      </div>
    )
  }
}


h1, h2,  h3,  a {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

}

#navcontainer ul {
    margin: 0;
    padding-top: 2%;
    list-style-type: none;
    text-align:center;
  }

#navcontainer ul li { display: inline; }

#navcontainer ul li a {
    text-decoration: none;
    padding: .2em 1em;
  }

.alignleft {
    padding-left: 2%;
    float: left;
  }

.alignright {
    padding-right: 2%;
    float: right;
  }

Upvotes: 1

Views: 1245

Answers (1)

2u4u
2u4u

Reputation: 348

UPD

I updated codesandbox. Please check it.

  1. I changed order of elements in menu-outer

  2. I removed float in all child elements of menu-outer and gave them flex: 1

  3. I added

    #menu-outer { display: flex; justify-content: center; align-items: center; }

  4. .alignright also has text-align: right

Why I removed float and added flex? This approach it is better to handle block elements in horizontal line.

Also I would offer you to forget about padding with %, in terms of UI it is better to use numbered paddings (10px, 20px, or even better 16px and 32px)

Previous reply

I tried your example and it works fine here. This means that problem is not in this part of code, but somewhere in parent component.

Upvotes: 1

Related Questions