Having trouble centering some text links on my nav bar, margin left and right auto aren't working and i've tried setting display types to block/inline-block to no avail. The solution is probably staring me in the face I know but I really can't find it.
CSS:
.navmenu {
background-color: #1e1e1e;
background-image: url("../images/NavBar.gif");
background-position: top;
border-top: 1px solid #383838;
margin-bottom: 5px;
z-index:105;
}
.navlink {
margin-left:auto;
margin-right: auto;
width: 100%;
font-size: 28px;
text-transform: uppercase;
}
HTML:
<div class="navmenu">
<div class="navlink">
Home
Twitch
YouTube
Twitter
Facebook
Teamspeak
Forum
</div>
</div>
Use flex to it get more flexible:
.navmenu { margin: 0 auto }
.navlink { display: flex; justify-content: center }
Looks like you are setting .navlink width to 100%. Reduce it to the width of the rest of your content. I tried 800px and it worked well.
.nav-menu{ width: 100%; text-align: center; }
This worked for me.
You following CSS on .navlink
.navlink {
display: flex;
justify-content: center;
}
.navmenu {
background-color: #1e1e1e;
border-top: 1px solid #383838;
margin-bottom: 5px;
z-index:105;
}
.navlink {
font-size: 14px;
text-transform: uppercase;
display: flex;
justify-content: center;
}
.navlink a {
color: #fff;
}
<div class="navmenu">
<div class="navlink">
Home
Twitch
YouTube
Twitter
Facebook
Teamspeak
Forum
</div>
</div>
i have a another very good solution for you
<div id="nav">
<span>Twitter</span>
<span>Facebook</span>
<span>YouTube</span>
</div>
<!--Css style sheet for above code-->
#nav{
width:100%;
text-align:center;
}
#nav span a{
text-decoration:none;
padding:10px;
}
Try:
.navlink { text-align:center }
The top logo is centered because it has a fixed width. The nav bar is not centered because it is 100% of the screen width. If you make this a lower percent or use the same fixed width as the logo image, then it will work be centered.
.navlink {
margin-left:auto;
margin-right: auto;
width: 1024px;
font-size: 28px;
text-transform: uppercase;
}
Add text-align:center; to your nav-link class
.nav-link
{
text-align:center;
}
Related
Hello I want to try get this title to be in the centre. as shown here it just does not go to the centre and its really annoying me.
screenshot of issue: https://i.imgur.com/tJhbKS1.jpg
If there is anyway in which you can also make this better that would be great. My goal is eventually to maker the centre box stretch 100% of the screen down
My main focus for this post is to make the text in the centre body box to basically have the title test to be in the centre and then the
test to be underneath a little bit in the centre so when I write it will be in the centre and when it reaches the end of the box it will make a new line/.
I also want it so the box is fixed to where it is and it doesn't ever move.
* /*Main Navbar (at top) */ .navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: darkgrey;
border-bottom: 0.05px solid black;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
a:hover:not(.active) {
background-color: #a0a0a0;
border-bottom: 0.05px solid black;
border: 0.05px solid black;
}
/*The body in the center of website */
.body-container {
height: 100%;
width: 50%;
margin-left: auto;
margin-right: auto;
}
.menu {
padding: 20px;
display: flex;
margin-left: auto;
margin-right: auto;
width: auto;
background-color: darkgrey;
text-decoration-color: black;
}
.body-container .menu .title {
margin-left: auto;
margin-right: auto;
text-align: center;
padding-left: 50%;
}
.body-container .body-text {
text-align: center;
margin-top:10%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./css/header.css">
<link rel="stylesheet" type="text/css" href="./css/site.css">
</head>
<body>
<ul class="navbar">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li style="float: right; ">Login</li>
</ul>
<div class="body-container">
<div class="menu">
<div class="title">
<h1>test</h1>
</div>
<div class="body-text">
<p>test </p>
</div>
</div>
</div>
</body>
</html>
Remove padding-left:50%; in .body-container .menu .title to center your headline. Furthermore, you used display:flex, this will occur that the subline doesn't get centered.
Have a look into this Codepen.
https://codepen.io/dmnktoe/pen/wOyxor
(Update: I would recommend you, not to use an absolute position for your element, since it isn't very responsive.)
I tried this and worked:
.body-container .menu .title {
margin-left: auto;
margin-right: auto;
text-align: center;
.body-container .body-text {
text-align: center;
margin: auto;
display: block;
position: absolute;
top: 115px;
left: 315px;
I always use margin: 0 auto; and it works almost all the times
Okay, so, I honestly don't know what I'm doing wrong. So let me just show you:
This is what I'm trying to accomplish (made in PS):
http://puu.sh/ryXC9/7d82671ee0.png
What my results are so far:
http://puu.sh/ryXST/02c9722a53.png (Obviously not successful, and as a side note, the orange box is just a placeholder, I'll fill out the form later).
The problem I'm having is first: Trying to have the width of "social-content" to be just the width and height of the held contents. Of course "main-social" is just the width of screen and height of contents. If I can accomplish the width thing with "social-content" then I'll be able to center the div with "Margin: 0 auto" but alas, I cannot figure out my dilemma. This is my relavent markup( "Follow us" bar is excluded, as its irrelevant):
.fa-facebook {
color: white;
overflow: hidden;
}
.fa-twitter {
color: white;
padding: 0.2em;
}
#main-social {
height: 8em;
}
#social-content {
height: 100%;
width: 70%;
margin: 0 auto;
margin-top: 1.4em;
}
#facebook {
float: left;
display: inline-block;
}
#facebook a {
padding: 0.2em 0.4em 0.2em 0.4em;
background-color: #3b5998;
height: 100%;
text-decoration: none;
}
#facebook a:hover {
color: white;
}
#twitter {
float: left;
display: inline-block;
}
#twitter a {
background-color: #10bbe6;
text-decoration: none;
}
#twitter a:hover {
color: white;
}
#emailForm {
float:left;
display: inline-block;
width: 25em;
margin: 0 auto;
background-color: orange;
height: 7em;
}
<script src="https://use.fontawesome.com/d7993286b8.js"></script>
<div id="main-social">
<div id="social-content">
<div id="facebook">
</div>
<div id="emailForm">
</div>
<div id="twitter">
<a href="twitter.com" class="fa fa-twitter fa-5x" ></a>
</div>
</div>
</div>
Also, the problem also is, It needs to be responsive, the entire site is responsive, and since I'm still new to the responsive scene, I may have not taken the best approaches to it. (Tips not needed, but greatly appreciated :) )
To get #social-content's width to be that of its content, use display: inline-block without a width defined.
If #main-social is simply a container, you can use flexbo to center #social-content within it. Add the following to #main-social:
#main-social {
display: flex;
justify-content: center; // Centers horizontally
align-items: center; // If you need to center vertically, as well
}
I just want to move the 3 links(shaped into block) to center. it should be easy but I just can't figure out how to. Center as in horizontally center. its probably a silly mistake or concept problem. I don't want to move the text in centre of box, just want to move the box.
CSS:
<style>
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
header li{
list-style: none;
}
a:link, a:visited
{
text-decoration: none;
background-color: green;
border: 5px solid black;
color: white;
display: block;
text-align: center;
width: 200px;
position: relative;
margin-left: 240px;
margin-bottom: 5px;
}
a:hover, a:active{
color: black;
background-color: red;
margin-bottom: 10px;
font-size: 1.5em;
}
header li:nth-child(3)
{
font-size: 25px;
}
HTML:
<header>
<ul>
<li> Google</li> <!-- notice here how when 9i add "http:// the link will open and if don't it won't-->
<li> Facebook </li>
<li> Wikipedia </li>
</ul>
</header>
How about displaying your whole unordered list as an inline block and centering the text content within your header, making the list centered:
header{
text-align: center;
}
header > ul{
display: inline-block;
}
JSFiddle
Note: I removed the margin from your anchors, since I assumed this was some attempt at making them more central. Correct me if I'm wrong.
You can also add margin: 0 auto; to the actual anchor tags and remove your margin-left attribute. Fiddle
As it's been said, to center blocks horizontally you should use automatic margins on both left and right sides. It will work with any block (not inline elements) that has a specified width. Inline elements can easily be converted into blocks with display: block;
div{
display: block;
margin-left: auto;
margin-right: auto;
background-color: red;
height: 100px;
width: 100px;
}
<div></div>
Looking for a little help with a project, I am trying to get a nav bar centered inside a header with a logo on the left.
HTML
<header>
<img src="http://s32.postimg.org/5bebu6mbl/Image_5_8_16_at_12_10_PM.jpgHome" />
<div id="nav">
<span>Home</span>
<span><button>Televeisions</button></span>
<span>Electronics</span>
<span>Services</span>
</div>
</header>
CSS
header {
height: 5.5em;
background: gray;
color: Black;
text-align: justify;
}
#nav {
width: 100%;
text-align: center;
}
#nav span a {
color: black;
text-decoration: none;
padding: 10px;
}
JSFiddle
Your nav width 100% is forcing the nav below the image. I added overflow: hidden to the header, floated the img left, and put a margin-top on the #nav.
Adjust your CSS to something like this:
header {
height: 5.5em;
background: gray;
color: Black;
text-align: justify;
overflow: hidden;
}
img {
float: left;
}
#nav {
width: 600px;
text-align: center;
margin-top: 2.5em;
}
#nav span a {
color: black;
text-decoration: none;
padding: 10px;
}
You can adjust the margin, etc. to style how you want from there on out.
Codepen: http://codepen.io/Tambe257/pen/XdGdLZ
Use positioning on your parent element and your child elements that will be nested inside. Here's a quick example
header {
height: 5.5em;
background: gray;
color: Black;
text-align: justify;
position:relative;
}
#nav {
width: 100%;
text-align: center;
top:2em;
position:absolute;
}
#nav span a {
color: black;
text-decoration: none;
padding: 10px;
}
So I've seen several answers to this question here and around the web, but I cannot seem to get it to work for me.
This is first time coding anything beyond the basics (and I only have a week to do it for a class).
I've tried using two ul's with a div in the middle, but one ul with the logo image as a li seems to get me the closest. My problem is that while the logo is actually centered, I can't get the other li's to be centered around it while getting the whole nav bar itself to be centered on the page.
The site will also have to be responsive (a whole other issue, I know, but I don't want to gunk up my code with a solution that will be incompatible with a responsive design). I'm also not sure hoe to get the logo and the other li's to be vertically centered. I've tried 'vertical-align: middle' but without any success. Thanks so much for any help.
Here's my HTML.
<body>
<div class="header">
<div class="nav">
<ul>
<li class="navright">HOME</li>
<li class="navright">MENU</li>
<li id="logo"><img src="Images/pantry logo.png" width="536" height="348"/></li>
<li class="navleft">CONTACT</li>
<li class="navleft">ABOUT</li>
</ul>
</div>
</div>
And the CSS.
.header {
width: 960px;
height: 200px;
margin: 0 auto;
text-align: center;
position: relative;
}
div ul li{
display: inline-block;
padding: 60px 70px 40px 0;
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 18px;
color: #4f4d4b;
text-decoration: none;
list-style: none;
}
div ul li a {
list-style: none;
text-decoration: none;
color: #4f4d4b;
}
.nav ul li a:visited {
text-decoration: none;
color: #4f4d4b;
}
#logo a img {
width: 250px;
height: auto;
position: absolute;
left: 50%;
margin-left: -125px;
display: inline-block;
}
You can go to the site [here].
Don't know why are you using logo in menu. You can place it to the center using position property. Using your current structure responsive version is also difficult.
For desktop version, add below code in your css
.nav ul li:nth-child(3){
width:250px;
}
This will create a proper structure. But I would suggest, not to use current structure to center a logo. Separate logo from your menu and place it in separate div and position it using position property.
Here is the update fiddle http://jsfiddle.net/JtfBP/
#logo {
height: 60px;
padding: 0;
width: 250px;
}
Can you make the background of the header the logo instead and not make it repeat?
.header {
width: 965px;
height: 200px;
margin: 0 auto;
text-align: center;
position: relative;
background:url('Images/pantry logo.png') center;
}
Use separate div layers instead of a ul list, that utilise the same div class (div.navigator) with the same height as the header, then use display:float and float: left in your css.
div.navigator {
list-style: none;
text-decoration: none;
width: 192px;
height: 200px;
padding: 60px 70px 40px 0;
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 18px;
color: #4f4d4b;
text-decoration: none;
display: float;
float: left;
}
so your header code is now:
<div class="header">
<div class="nav">HOME</div>
<div class="nav">MENU</div>
<div class="nav"></div>
<div class="nav">CONTACT</div>
<div class="nav">ABOUT</div>
</div>