I'm making a simple product display website for my class and I'm a little stuck on centering the image for my header. I'll be adding a product navigation menu to the left so I wanted my logo centered but I can't seem to get it to center. What should I change in order to center it since with my current code text-align: center isn't working.
header, footer {
background-color: lightgray;
border: solid 1px black;
overflow: hidden;
padding: 20px 10px;
}
footer {
padding: 10px;
border-radius: 3px;
}
body {
font-family: Segoe UI, Arial, Helvetica, sans-serif;
font-size: 16px;
background-color: darkgray;
}
html, body {
padding: 0;
margin: 0;
}
.header a {
float: left;
color: #000000;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 26px;
border-radius: 4px;
}
.header .logo {
text-align: center;
max-width: 12%;
height: auto;
}
.header a:hover {
background-color: #9B9B9B;
color: #000000;
}
.header a.active {
background-color: #767676;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Vape Away</title>
<meta name="description" content="Vape Juice Product Display">
<meta name="author" content="Jordan">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="wrapper">
<header class="header">
<img src="img/logo.png" class="logo">
<div class="header-right">
<a class="active" href="index.html">Home</a>
Contact Me
About Me
Wholesale Options
</div>
<!-- ^ header ^ -->
</header>
</div>
</body>
</html>
Add text-align:center to header:
header, footer {
background-color: lightgray;
border: solid 1px black;
overflow: hidden;
padding: 20px 10px;
text-align:center;
}
.header a {
float: left;
color: #000000;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 26px;
border-radius: 4px;
}
.header .logo {
text-align: center;
max-width: 12%;
height: auto;
}
.header a:hover {
background-color: #9B9B9B;
color: #000000;
}
.header a.active {
background-color: #767676;
}
.header-right {
float: right;
}
<div id="wrapper">
<header class="header">
<img src="img/logo.png" class="logo">
<div class="header-right">
<a class="active" href="index.html">Home</a>
Contact Me
About Me
Wholesale Options
</div>
<!-- ^ header ^ -->
</header>
</div>
You can do as Moize says. You can also solve your problem using display flex.
header,
footer {
background-color: lightgray;
border: solid 1px black;
overflow: hidden;
padding: 20px 10px;
}
footer {
padding: 10px;
border-radius: 3px;
}
body {
font-family: Segoe UI, Arial, Helvetica, sans-serif;
font-size: 16px;
background-color: darkgray;
}
html,
body {
padding: 0;
margin: 0;
}
.header a {
float: left;
color: #000000;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 26px;
border-radius: 4px;
}
.header .logo {
/* text-align: center; */
max-width: 12%;
/* height: auto; */
}
.header a:hover {
background-color: #9B9B9B;
color: #000000;
}
.header a.active {
background-color: #767676;
}
.header-right {
/* float: right; */
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
.header { /*I took some of your lines into the comment and added this. */
display: flex;
justify-content: space-between;
align-items: center;
}
<div id="wrapper">
<header class="header">
<img src="https://static.rfstat.com/renderforest/images/v2/logo-homepage/flat_3.png" class="logo">
<div class="header-right">
<a class="active" href="index.html">Home</a>
Contact Me
About Me
Wholesale Options
</div>
<!-- ^ header ^ -->
</header>
</div>
Related
Im to html and css and im trying to make a game website for my school but when i try to change div into a on for the card it moves the card down the page as seen in the images bellow,if you guys have any ideas why this is doing this please help im sort of stuck and I want to fiqure this out before I continue with this page.
Before Change
Before
After Change
After
<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
<title>Project-LuLo</title>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<style>
body {
font-family: 'Open Sans', sans-serif;
}
.shell{
justify-content:center;
display: flex;
flex-direction:row;
flex-basis: auto;
margin:5px;
}
.card {
width: 175px;
display: flex;
flex-direction: column;
border: 1px solid #EF9A9A;
border-radius: 4px;
overflow: hidden;
margin: 10px;
text-decoration:none;
}
.card-header {
color: #D32F2F;
text-align: center;
font-size: 18px;
font-weight: 600;
border-bottom: 1px solid #EF9A9A;
background-color: #FFEBEE;
padding: 5px 10px;
}
.card-main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 15px 0;
}
.material-icons {
font-size: 72px;
margin-bottom: 5px;
color: #D32F2F;
}
.main-description {
color: #D32F2F;
font-size: px;
text-align: center;
}
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.header {
overflow: hidden;
background-color: #FFEBEE;
padding: 20px 10px;
border-bottom: 1px solid #EF9A9A;
border-radius: 4px;
}
.header a {
float: left;
color: #D32F2F;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #dfd5d7;
color: #942626;
}
.header a.active {
background-color: #D32F2F;
color: #FFEBEE;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
</style>
</head>
<body>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet">
<div class="header">
Project-LuLo
<div class="header-right">
<a class="active" href="#home">Home</a>
Games
Contact
</div>
</div>
<div class="shell">
<a href = "#test"class="card">
<div class="card-header">Games</div>
<div class="card-main">
<i class="material-icons">videogame_asset</i>
<div class="main-description">Web Based Games</div>
</div>
</div>
<a href="#test"class="card">
<div class="card-header">Other</div>
<div class="card-main">
<i class="material-icons">question_mark</i>
<div class="main-description">Cool Random Stuff</div>
</div>
</div>
</div>
</body>
</html>
There was a few unclosed <a> tags and when you changed one of the tags to an <a> it also was removed from inside the <div> that contained your shell class which was the flex element that was holding the 2 cards beside each-other
body {
font-family: 'Open Sans', sans-serif;
}
.shell{
justify-content:center;
display: flex;
flex-direction:row;
flex-basis: auto;
margin:5px;
}
.card {
width: 175px;
display: flex;
flex-direction: column;
border: 1px solid #EF9A9A;
border-radius: 4px;
overflow: hidden;
margin: 10px;
text-decoration:none;
}
.card-header {
color: #D32F2F;
text-align: center;
font-size: 18px;
font-weight: 600;
border-bottom: 1px solid #EF9A9A;
background-color: #FFEBEE;
padding: 5px 10px;
}
.card-main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 15px 0;
}
.material-icons {
font-size: 72px;
margin-bottom: 5px;
color: #D32F2F;
}
.main-description {
color: #D32F2F;
font-size: px;
text-align: center;
}
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.header {
overflow: hidden;
background-color: #FFEBEE;
padding: 20px 10px;
border-bottom: 1px solid #EF9A9A;
border-radius: 4px;
}
.header a {
float: left;
color: #D32F2F;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #dfd5d7;
color: #942626;
}
.header a.active {
background-color: #D32F2F;
color: #FFEBEE;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet">
<div class="header">
Project-LuLo
<div class="header-right">
<a class="active" href="#home">Home</a>
Games
Contact
</div>
</div>
<div class="shell">
<a href="#test" class="card">
<div class="card-header">Games</div>
<div class="card-main">
<i class="material-icons">videogame_asset</i>
<div class="main-description">Web Based Games</div>
</div>
</a>
<a href="#test"class="card">
<div class="card-header">Other</div>
<div class="card-main">
<i class="material-icons">question_mark</i>
<div class="main-description">Cool Random Stuff</div>
</div>
</a>
</div>
When I increase the px of the icon located on the cards (The Gaming Controller and the Question Mark) It will not change the actual size of the icon when I run the code, Is there any other way to increase the size of these icons or a solution to my problem in anyway? Thanks for the help guys!
Here is my code :)
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.shell {
height:65vh;
justify-content: center;
display: flex;
flex-direction: row;
flex-basis: auto;
margin: 5px;
align-items: center; /* Added */
}
.card {
display: inline-block;
width: 200px;
height: 150px;
border: 1px solid #EF9A9A;
border-radius: 4px;
margin: 5px;
text-decoration: none;
}
.card-header {
color: #D32F2F;
text-align: center;
font-size: 24px;
font-weight: 600;
border-bottom: 1px solid #EF9A9A;
background-color: #FFEBEE;
padding: 5px 10px;
}
.card-main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 15px 0;
}
.material-icons {
font-size: 24px;
color: #D32F2F;
margin-bottom: 5px;
}
.main-description {
color: #D32F2F;
font-size: 24px;
text-align: center;
}
.header {
overflow: hidden;
background-color: #FFEBEE;
padding: 20px 10px;
border-bottom: 1px solid #EF9A9A;
border-radius: 4px;
}
.header a {
float: left;
color: #D32F2F;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #dfd5d7;
color: #942626;
}
.header a.active {
background-color: #D32F2F;
color: #FFEBEE;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
</style>
<body>
<!DOCTYPE html>
<head>
<link rel="icon" type="png" href="/images/icon.png"/>
<meta charset="utf-8"/>
<title>Project-LuLo</title>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet">
<div class="header">
Project-LuLo
<div class="header-right">
<a class="active" href="#home">Home</a>
Games
Contact
</div>
</div>
<div class="shell">
<a href = "#test"class="card">
<div class="card-header">Games</div>
<div class="card-main">
<i class="material-icons">videogame_asset</i>
<div class="main-description">Web Based Games</div>
</div>
</a>
<a href="#test"class="card">
<div class="card-header">Other</div>
<div class="card-main">
<i class="material-icons">question_mark</i>
<div class="main-description">Cool Random Stuff</div>
</div>
</a>
</div>
A way to fix are adding "!important" to font-size it will work change your icon size, for example:
.material-icons {
font-size: 30px!important;
color: #D32F2F;
margin-bottom: 5px;
}
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 5 months ago.
Improve this question
I'm trying to make a row of cards but the cards are staying in a column and not going into a row like my flex-direction should tell them to go.
I want it to look like this
https://css-tricks.com/snippets/css/a-guide-to-flexbox/:
But it looks like this
image.png:
body {
font-family: 'Open Sans', sans-serif;
}
.shell {
flex-direction: row;
border: 1px solid #EF9A9A;
flex-basis: auto;
margin: 5px;
}
.card {
width: 150px;
display: flex;
flex-direction: column;
border: 1px solid #EF9A9A;
border-radius: 4px;
overflow: hidden;
margin: 0px;
}
.card-header {
color: #D32F2F;
text-align: center;
font-size: 12px;
font-weight: 600;
border-bottom: 1px solid #EF9A9A;
background-color: #FFEBEE;
padding: 5px 10px;
}
.card-main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 15px 0;
}
.material-icons {
font-size: 36px;
color: #D32F2F;
margin-bottom: 5px;
}
.main-description {
color: #D32F2F;
font-size: 12px;
text-align: center;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.header {
overflow: hidden;
background-color: #FFEBEE;
padding: 20px 10px;
border-bottom: 1px solid #EF9A9A;
border-radius: 4px;
}
.header a {
float: left;
color: #D32F2F;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #dfd5d7;
color: #942626;
}
.header a.active {
background-color: #D32F2F;
color: #FFEBEE;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet">
<div class="header">
Project-LuLo
<div class="header-right">
<a class="active" href="#home">Home</a>
Games
Contact
</div>
</div>
<div class="shell">
<div class="card">
<div class="card-header">Games</div>
<div class="card-main">
<i class="material-icons">videogame_asset</i>
<div class="main-description">Web Based Games</div>
</div>
</div>
<div class="card">
<div class="card-header">Games</div>
<div class="card-main">
<i class="material-icons">videogame_asset</i>
<div class="main-description">Web Based Games</div>
</div>
</div>
</div>
On your class .shell you had styles to dictate what to do with display: flex; but the shell class itself also needed to have display flex on it.
body {
font-family: 'Open Sans', sans-serif;
}
.shell{
display: flex;
flex-direction:row;
border: 1px solid #EF9A9A;
flex-basis: auto;
margin:5px;
}
.card {
width: 150px;
display: flex;
flex-direction: column;
border: 1px solid #EF9A9A;
border-radius: 4px;
overflow: hidden;
margin: 0px;
}
.card-header {
color: #D32F2F;
text-align: center;
font-size: 12px;
font-weight: 600;
border-bottom: 1px solid #EF9A9A;
background-color: #FFEBEE;
padding: 5px 10px;
}
.card-main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 15px 0;
}
.material-icons {
font-size: 36px;
color: #D32F2F;
margin-bottom: 5px;
}
.main-description {
color: #D32F2F;
font-size: 12px;
text-align: center;
}
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.header {
overflow: hidden;
background-color: #FFEBEE;
padding: 20px 10px;
border-bottom: 1px solid #EF9A9A;
border-radius: 4px;
}
.header a {
float: left;
color: #D32F2F;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #dfd5d7;
color: #942626;
}
.header a.active {
background-color: #D32F2F;
color: #FFEBEE;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
<title>Project-LuLo</title>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
</head>
<body>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet">
<div class="header">
Project-LuLo
<div class="header-right">
<a class="active" href="#home">Home</a>
Games
Contact
</div>
</div>
<div class="shell">
<div class="card">
<div class="card-header">Games</div>
<div class="card-main">
<i class="material-icons">videogame_asset</i>
<div class="main-description">Web Based Games</div>
</div>
</div>
<div class="card">
<div class="card-header">Games</div>
<div class="card-main">
<i class="material-icons">videogame_asset</i>
<div class="main-description">Web Based Games</div>
</div>
</div>
</div>
</body>
</html>
The answer above is good but here is a more code-clean way to do the same thing.
I moved the css to a dedicated file for it, as ounce you reach over 25 CSS lines, it becomes pretty dirty and it's better to put it in a different file. Then I deleted styles that were later overwritten and some useless properties. Afterwards I tidied up the html so you can keep track of what divs are in what divs and here is the result.
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.shell{
border: 1px solid #EF9A9A;
margin:5px;
}
.card {
display: inline-block;
width: 150px;
border: 1px solid #EF9A9A;
border-radius: 4px;
margin: 0px;
}
.card-header {
color: #D32F2F;
text-align: center;
font-size: 12px;
font-weight: 600;
border-bottom: 1px solid #EF9A9A;
background-color: #FFEBEE;
padding: 5px 10px;
}
.card-main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 15px 0;
}
.material-icons {
font-size: 36px;
color: #D32F2F;
margin-bottom: 5px;
}
.main-description {
color: #D32F2F;
font-size: 12px;
text-align: center;
}
.header {
overflow: hidden;
background-color: #FFEBEE;
padding: 20px 10px;
border-bottom: 1px solid #EF9A9A;
border-radius: 4px;
}
.header a {
float: left;
color: #D32F2F;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #dfd5d7;
color: #942626;
}
.header a.active {
background-color: #D32F2F;
color: #FFEBEE;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
<title>Project-LuLo</title>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet">
<div class="header">
Project-LuLo
<div class="header-right">
<a class="active" href="#home">Home</a>
Games
Contact
</div>
</div>
<div class="shell">
<div class="card">
<div class="card-header">Games</div>
<div class="card-main">
<i class="material-icons">videogame_asset</i>
<div class="main-description">Web Based Games</div>
</div>
</div>
<div class="card">
<div class="card-header">Games</div>
<div class="card-main">
<i class="material-icons">videogame_asset</i>
<div class="main-description">Web Based Games</div>
</div>
</div>
</div>
</body>
</html>
i am a 17 year old boy and recently new at using html and css ,i have been making a website and i am trying to add a drop down menu on my existing website but i am struggling to do so as everything , i want a drop down menu on my photos tab so that i can add some pictures and one in my "ABOUT" tab as well , i tried is not working , any help will be appreciated and welcomed. Thanks in advance
*
{
margin: 0;
padding: 0;
}
header
{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(1493004618106.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
.main-nav
{
float: right;
list-style: none;
margin-top: 30px;
}
.main-nav li
{
display: inline-block;
}
.main-nav li a
{
color: white;
text-decoration: none;
padding; 5px 20px;
font-family: "Roboto", sans-serif;
font-size: 15px;
}
.main-nav li.active a
{
border: 1px solid white;
}
.main-nav li a:hover
{
border: 1px solid white;
}
.logo img
{
width: 100px;
height: auto;
float: left;
}
body
{
font-family: monospace;
}
.row
{
max-width: 1200px
margin: auto;
}
.hero
{
position: absolute;
width: 1000px;
margin-left: 200px;
margin-top: 0px;
margin-right: 50px;
}
h1
{
color: white;
text-transform: uppercase;
font-size: 70px;
text-align: center;
margin-top: 275px;
}
.button
{
margin-top: 30px;
margin-left: 330px;
}
.btn
{
border : 1px solid white;
padding: 10px 30px;
color: white;
text-decoration: none;
margin-right: 5px;
font-size: 13px;
text-transform: uppercase
}
.btn-one
{
background-color: darkblue;
font-family: "Roboto", sans-serif;
}
.btn-two
{
font-family: "Roboto", sans-serif
}
.btn-two:hover
{
background-color: darkblue
}
index.html
<html>
<head>
<title>Bryan's Holidays</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="row">
<div class="logo">
<img src="fr.png">
</div>
<ul class="main-nav">
<li class="active"> HOME</li>
<li> ABOUT</li>
<li> PHOTOS</li>
<li> CONTACT</li>
</ul>
</div>
<div class="hero">
<h1>WELCOME!</h1>
<div class="button">
Watch video
Explore more
</div>
</div>
</header>
</body>
</html>
Does this help you?
https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_dropdown_hover
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
<h2>Dropdown Button</h2>
<p>Move the mouse over the button to open the dropdown content.</p>
<div class="w3-dropdown-hover">
<button class="w3-button w3-black">Hover Over Me!</button>
<div class="w3-dropdown-content w3-bar-block w3-border">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</body>
</html>
I didn't change too much of your code, just some designs and dynamics. Please sort your code later, it's a bit confusing.
CSS
{
margin: 0;
padding: 0;
}
header
{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(1493004618106.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
.main-nav
{
float: right;
list-style: none;
margin-top: 30px;
}
.main-nav li
{
display: inline-block;
}
.main-nav li a
{
color: white;
text-decoration: none;
padding; 5px 20px;
font-family: "Roboto", sans-serif;
font-size: 15px;
}
.main-nav li.active a
{
border: 1px solid white;
}
.main-nav li a:hover
{
border: 1px solid white;
}
.logo img
{
width: 100px;
height: auto;
float: left;
}
body
{
font-family: monospace;
}
.row
{
max-width: 1200px
margin: auto;
padding-top: 10px;
}
.hero
{
position: absolute;
width: 1000px;
margin-left: 200px;
margin-top: 0px;
margin-right: 50px;
}
h1
{
color: white;
text-transform: uppercase;
font-size: 70px;
text-align: center;
margin-top: 275px;
}
.button
{
margin-top: 30px;
margin-left: 330px;
}
.btn
{
border : 1px solid white;
padding: 10px 30px;
color: white;
text-decoration: none;
margin-right: 5px;
font-size: 13px;
text-transform: uppercase
}
.btn-one
{
background-color: darkblue;
font-family: "Roboto", sans-serif;
}
.btn-two
{
font-family: "Roboto", sans-serif
}
.btn-two:hover
{
background-color: darkblue
}
.float-right{
margin-left: 60%
}
.dropbtn {
background-color: #464;
border-radius: 5px;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
HTML
<html>
<head>
<title>Bryan's Holidays</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="row" style="">
<div class="logo">
<img src="fr.png">
</div>
<div class="float-right">
<!-- ++++++++ Home -->
<button class="dropbtn">Home</button>
<!-- ++++++++ About -->
<div class="dropdown">
<button class="dropbtn">About</button>
<div class="dropdown-content">
Link 4
Link 5
Link 6
</div>
</div>
<!-- ++++++++ Photos -->
<div class="dropdown">
<button class="dropbtn">Photos</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<!-- ++++++++ Contact -->
<button class="dropbtn">Contact</button>
</div>
</div>
<div class="hero">
<h1>WELCOME!</h1>
<div class="button">
Watch video
Explore more
</div>
</div>
</header>
</body>
</html>
I am trying to get an image, some text, and a form that are in a container div to be centered instead of left justified, but when I try to float the image it just goes right or left and the text gets all screwed up.
.header, .navBar, .pageTitle {
margin: 0px;
padding: 0px;
}
body {
margin: 0px;
padding: 0px;
font-size: 20px;
background-color: #006464;
}
footer {
background-color: #bfd8d8;
position: absolute;
bottom: 0px;
width: 100%;
font-size: 15px;
border: 1px solid black;
}
nav, h1, h2 {
font-family: arial, sans-serif;
}
nav a:hover {
background-color: #006400;
}
nav a {
color: white;
text-decoration: none;
}
h2 {
text-align: center;
background-color: white;
}
#container {
width: 1000px;
margin: auto;
min-height: 100vh;
position: relative;
}
#signUp {
color: white;
font-size: 20px;
font-family: arial;
}
#welcomeFont {
color: white;
font-size: 25px;
font-family: arial;
}
.currentNav {
background-color: #006400;
}
.emailStyle {
font-weight: bolder;
}
.footerSpacer {
height: 50px;
}
.header {
color: white;
background-color: #006400;
padding: 20px;
}
.headerAnchor {
text-decoration: none;
color: white;
}
.navBar {
background-color: #228B22;
padding: 10px;
}
.pageTitle {
padding-bottom: 0px;
box-shadow: 0px 8px 25px 0px;
background-color: #bfd8d8;
}
.poetryAuthor {
color: white;
font-size: 15px;
font-family: arial;
font-style: italic;
}
.poetryCaptions {
margin-top: 50px;
color: white;
font-size: 25px;
font-family: georgia, serif;
}
.resizeAbout {
max-height: 50%;
max-width: 50%;
margin-top: 50px;
margin-bottom: 50px;
}
.resizeHome {
max-height: 50%;
max-width: 50%;
margin-top: 50px;
}
.resizePhotos {
max-height: 50%;
max-width: 50%;
}
.table {
background: #006464;
max-width: 100%;
border: 1px solid black;
border-spacing: 10px;
margin-left: auto;
margin-right: auto;
}
.tableData {
font-size: 19px;
background: #bfd8d8;
border: 1px solid black;
padding: 8px;
}
<!DOCTYPE html>
<! Must have tables, forms, multimedia, and links >
<head>
<title>Home - The Singular Effect</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<header>
<h1 class="header"><a class="headerAnchor" href="index.html">TheSingularEffect.Com</a></h1>
</header>
<nav class="navBar"> <a class="currentNav" href="index.html">Home</a> Music Photos Poetry About </nav>
<h2 class="pageTitle"> Get the Full Effect! </h2>
<img class="resizeHome" src="image/homepage.jpg" alt="Image of Daniel Adams">
<h3 id="welcomeFont"> Welcome to the home of The Singular Effect! </h3>
<br>
<form>
<span id="signUp">Sign up for our newsletter!</span> <br>
<input type="text" name="emailaddress" value="Email Address">
<input type="submit" value="submit">
</form>
<div class="footerSpacer"> </div>
<footer> © 2016, Chris Hughes - SNHU. Contact me at <span class="emailStyle">christopher.hughes1#snhu.edu</span> </footer>
</div>
</body>
Add this to your CSS:
#container {
text-align: center;
}
And if you don't want all your content centered in this way, just wrap the content you do and give the container a text-align: center.
add text-align:center in your body tag. Try it.
body {
text-align:center;
margin: 0px;
padding: 0px;
font-size: 20px;
background-color: #006464;
}