Reputation: 109
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
Reputation: 348
UPD
I updated codesandbox. Please check it.
I changed order of elements in menu-outer
I removed float
in all child elements of menu-outer
and gave them flex: 1
I added
#menu-outer { display: flex; justify-content: center; align-items: center; }
.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