For some reason, I can't move my text to the middle of my div. I have text-align: center; and justify-content: center; but it still stays at the top of my div, and won't move unless I force it to where I want it to go.
body {
margin: 0px;
}
.top-nav {
background-color: gray;
display: flex;
justify-content: left;
}
ul {
list-style: none;
display: block;
}
li {
padding: 10px;
margin-left: -30px;
color: white;
}
.big-hero {
background-image: url(../images/books.webp);
height: 100vh;
background-repeat: no-repeat;
margin-top: -22px;
text-align: center;
justify-content: center;
color: white;
}
<body>
<NAV class="top-nav">
<UL>
<LI>Home</LI>
<LI>About</LI>
<LI>Gallery</LI>
<LI>Calendar</LI>
<LI>Contact</LI>
</UL>
</NAV>
<div class="big-hero">
<h1>About Us</h1>
</div>
</body>
you have to use display:flex for the justify-content: center to work
try writing
.big-hero{
background-image: url(../images/books.webp);
height: 100vh;
background-repeat: no-repeat;
margin-top: -22px;
text-align: center;
display:flex; /* add this*/
justify-content: center;
color: white;
}
Change justify-content: left; to center.
.top-nav{
background-color: gray;
display: flex;
justify-content: center;
}
body{
margin: 0px;
}
.top-nav{
background-color: gray;
display: flex;
justify-content: center;
}
ul {
list-style: none;
display: block;
}
li {
padding: 10px;
color: white;
}
.big-hero {
background-image: url(../images/books.webp);
height: 100vh;
background-repeat: no-repeat;
margin-top: -22px;
text-align: center;
justify-content: center;
color: white;
}
<NAV class="top-nav">
<UL>
<LI>Home</LI>
<LI>About</LI>
<LI>Gallery</LI>
<LI>Calendar</LI>
<LI>Contact</LI>
</UL>
</NAV>
<div class="big-hero">
<h1>About Us</h1>
</div>
Add width: 100%; to your ul then simply add text-align: center; to your li's.
body {
margin: 0px;
}
.top-nav {
background-color: gray;
display: flex;
justify-content: left;
}
ul {
list-style: none;
display: block;
width: 100%;
}
li {
padding: 10px 0;
text-align: center;
color: white;
}
.big-hero {
background-image: url(../images/books.webp);
height: 100vh;
background-repeat: no-repeat;
margin-top: -22px;
text-align: center;
justify-content: center;
color: white;
}
<nav class="top-nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Calendar</li>
<li>Contact</li>
</ul>
</nav>
<div class="big-hero">
<h1>About Us</h1>
</div>
Related
I am a beginner at HTML, and I was trying to make a web page to gain experience. I wanted to create this menu but I want it to have options on both sides of it. Just like the HOME, ABOUT ME, etc. options is on the right side, I want similar options on the left side too but am not able to figure it out. Any help would be greatly appreciated.
The HTML code:
<div id="menu">
<nav class="navl" style="justify-content: right">
<ul>
<li class="navulli">
<a href="C:\Users\vivek\Desktop\html-css-course\LegendsOfTime\LOT_Home.html">
Home
</a>
</li>
</ul>
</nav>
</div>
The CSS code:
#menu {
width: 100%;
height: 30px;
background-size: cover;
justify-content: right;
margin: 0px;
padding: 0px;
}
.navl {
width: 100%;
height: 150%;
line-height: 10px;
margin-right: 60px;
display: flex;
background-color: black;
opacity: 0.6;
margin: 0px;
}
.navulli {
display: inline-block;
transition: 0.7s all;
font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
place-items: left;
margin: 0px;
}
.navulli:hover {
opacity: 0.4;
height: 20px;
border-radius: 20px;
}
nav ul li a {
text-decoration: none;
color: white;
padding: 30px;
justify-content: right;
font-size: calc(1rem + 0.2vw);
margin-top: 0px;
}
i {
text-decoration: none;
color: white;
justify-content: right;
padding: 15px;
font-size: calc(1rem + 0.5vw);
margin-top: 0px;
}
One possible solution would be to use a flexbox with justify-content: space-between;
nav {
background: silver;
padding: 1em;
display: flex;
justify-content: space-between;
}
nav ul {
display: inline-block;
margin: 0;
padding: 0;
}
nav ul li {
list-style: none;
display: inline;
margin: 0 1em;
}
<nav>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<ul>
<li>four</li>
<li>five</li>
<li>six</li>
</ul>
</nav>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background: #fff;
color: #333;
line-height: 1.5;
}
header {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #fff;
position: fixed;
overflow: hidden;
}
.logo {
font-size: 1.5rem;
color: #333;
letter-spacing: 5px;
}
ul li {
list-style: none;
}
.nav-list-item {
color: #333;
text-decoration: none;
}
.nav-list {
display: flex;
justify-content: space-around;
<header>
<div class="logo">
<h3>My Name</h3>
</div>
<ul class="nav-list">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</header>
I want to have a menu that is position at the center and have it fixed as i scroll down. but for some reason, after adding a position fixed to it. it breaks the actual alignment and i dont have any idea how to fix it.
Just add width: 100% to your header class:
header {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #fff;
position: fixed;
overflow: hidden;
width: 100%
}
I am having trouble centering my ul that contains icons of facebook, twitter, and linkedin. in my page the icons are more towards the right and are not centering. Any help would be greatly appreciated.
body {
margin: 0;
font-family: sans-serif;
}
header {
position: relative;
display: block;
width: 100%;
height: 100vh;
}
.header-bg {
position: absolute;
width: 100%;
height: 100%;
background-image: url(macbook2.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.header-dark {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
.wrapper {
width: 250px;
height: auto;
margin-top: -250px;
}
.selfie {
width: 175px;
height: 175px;
border-radius: 50%;
/*background-image: url(selfie.jpg);*/
background-position: center center;
background-size: cover;
border: 2px solid #6f6f70;
margin: 0 auto;
}
h2 {
color: white;
text-align: center;
}
ul {
list-style-type: none;
text-align: center;
}
ul li {
display: inline-block;
}
.ion-social-facebook {
color: white;
font-size: 32px;
}
.ion-social-twitter {
color: white;
font-size: 32px;
}
.ion-social-linkedin {
color: white;
font-size: 32px;
}
<link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<header>
<div class="header-bg"></div>
<div class="header-dark">
<div class="wrapper">
<div class="selfie"></div>
<h2>Name</h2>
<ul>
<!--this is what i am trying to center-->
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</div>
<nav>
</nav>
</header>
Your centering is working. Just use padding: 0; on the ul to remove the left standard padding of unordered lists.
body {
margin: 0;
font-family: sans-serif;
}
header {
position: relative;
display: block;
width: 100%;
height: 100vh;
}
.header-bg {
position: absolute;
width: 100%;
height: 100%;
background-image: url(macbook2.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.header-dark {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
.wrapper {
width: 250px;
height: auto;
margin-top: -250px;
}
.selfie {
width: 175px;
height: 175px;
border-radius: 50%;
/*background-image: url(selfie.jpg);*/
background-position: center center;
background-size: cover;
border: 2px solid #6f6f70;
margin: 0 auto;
}
h2 {
color: white;
text-align: center;
}
ul {
list-style-type: none;
text-align: center;
padding: 0;
}
ul li {
display: inline-block;
}
.ion-social-facebook {
color: white;
font-size: 32px;
}
.ion-social-twitter {
color: white;
font-size: 32px;
}
.ion-social-linkedin {
color: white;
font-size: 32px;
}
<link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<header>
<div class="header-bg"></div>
<div class="header-dark">
<div class="wrapper">
<div class="selfie"></div>
<h2>Name</h2>
<ul>
<!--this is what i am trying to center-->
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</div>
<nav>
</nav>
</header>
I can not seem to get my header to have the titles centered in the middle of the header box. How it looks now, it has the news, contacts, and about links high up in the box and not centered.
HTML:
<ul>
<li style="float:left"><a class="active" <a onclick="window.open(this.href, this.target);return false;" href="http://link/" target="link"> <img src="Logo.png" alt="Logo" style="width:125px;height:75px;"></a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
CSS:
ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: black;
}
li {
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: red;
}
.active {
background-color: black;
}
Try this on the <li>:
.li {
position: relative;
top: 50%;
transform: translateY(-50%);
}
how this works
EDIT: Cleaned up some unbalanced HTML issues and cleaned up the css:
ul {
list-style-type: none;
margin: 0;
padding: 50px; /* adjust as necessary */
overflow: hidden;
background-color: black;
}
li {
float: left;
position: relative;
top: 50%;
transform: translateY(-50%);
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
<ul>
<li>
<a class="active" onclick="window.open(this.href, this.target);return false;" href="http://link/" target="link"> <img src="Logo.png" alt="Logo" style="width:125px;height:75px;"></a>
</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
here's a more modern approach:
https://jsfiddle.net/qq0t46pt/2/
flexbox is also well supported now, and easier to implement.
HTML
<ul>
<li style="float:left"><a class="active"> <a onclick="window.open(this.href, this.target);return false;" href="http://link/" target="link"> <img src="Logo.png" alt="Logo" style="width:125px;height:75px;"></a></a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
CSS
ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: black;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: center;
height: 370px;
}
li {
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: red;
}
.active {
background-color: black;
}
If I am using
display: flex;
align-items: center;
how to make horizontal align of ul to right?
.navigation {
display: flex;
align-items: center;
width: 100%;
height: 80px;
background: rgb(255, 255, 255);
}
ul {
list-style: none;
/*float:right;*/
}
li {
display: inline-block;
}
a {
padding: 10px;
width: 80px;
text-decoration: none;
display: block;
text-align: center;
}
<div class="navigation">
<ul>
<li><a>Contacts</a></li>
<li><a>About</a></li>
<li><a>FAQ</a></li>
<li><a>Other</a></li>
</ul>
</div>
You can do this with justify-content: flex-end on .navigation
.navigation {
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
height: 80px;
background: rgb(255, 255, 255);
}
ul {
list-style: none;
display: flex;
padding: 0;
}
a {
padding: 10px 25px;
width: 80px;
text-decoration: none;
text-align: center;
}
<div class="navigation">
<ul>
<li><a>Contacts</a></li>
<li><a>About</a></li>
<li><a>FAQ</a></li>
<li><a>Other</a></li>
</ul>
</div>
Add flex-direction: row-reverse; to .navigation
.navigation {
display: flex;
align-items: center;
width: 100%;
height: 80px;
background: rgb(255,255,255);
flex-direction: row-reverse;/* Here is what you are looking for*/
}
ul {
list-style:none;
border:1px solid black;
}
li {
display:inline-block;
}
a {
padding: 10px;
width: 80px;
text-decoration: none;
display: block;
text-align: center;
}
<div class="navigation">
<ul>
<li><a>Contacts</a></li>
<li><a>About</a></li>
<li><a>FAQ</a></li>
<li><a>Other</a></li>
</ul>
</div>