Inline-Block element refuses to be centered

HTML & CSS
,
1

Admittedly, I am not the best coder (only 14 years old), but I need to center the inline-block element, but no matter what I do, it refuses to be centered.

I’ve tried using the “margin:auto” & width combo, but that didn’t work… I also crossed the margin-left trick out because I want the element to look the same on all devices. Could someone help me out?

> <head>
> <style>

> a:link, a:visited {
> text-decoration: none!important;
> }

> body {
> background-color: #051522;
> }

> p { 
> font-family: 'Raleway', sans serif;
> font-size: 13px;
> letter-spacing: 1px;
> line-height: 200%;
> color: #898989;

> }

> h4 {
> font-family: 'Lobster', cursive;
> font-size: 26px;
> color: #878787;
> }


> a {
>     display: inline-block;
>     color: #898989;
>     text-align: center;
>     padding: 14px 16px;
>     text-decoration: none;
>     border-right: 1.3px solid #6d6d6d;
>     font-family: 'Julius Sans One', sans-serif;
>     font-size: 15px;
>     text-transform: uppercase;
>     letter-spacing: 1px;
> }

> a:hover:not(.active) {
>     background-color: #444444;
>     transition-duration: 0.6s;
> }

> .active {
>     background-color: #666666;
>     color: #FFFFFF;
> }
> </style>
> <title>Emerald Scar</title>

> <link href="https://fonts.googleapis.com/css?family=Julius+Sans+One|Lobster|Open+Sans|Raleway" rel="stylesheet">

> <div style="position: absolute;top: 0px;left: 0px;"><img src="http://i.imgur.com/tRkMr8r.jpg"></div>
> </head>

> <body style="text-align: center;">
> <center>

> <div style="position: absolute;top: 570px;width: 70%;">
> <a class="active" href="#1">link 1</a>
> <a href="http://www.hexrpg.com/wishlist/index.php?view=Emerald%20Scar">link 2</a>
> <a href="http://www.hexrpg.com/owl/Emerald%20Scar">link 3</a>
> <a href="http://www.hexrpg.com/trophy/index.php?user=Emerald%20Scar">link 4</a>
> <a href="http://www.hexrpg.com/my.php">link 5</a>
> </div></center>

> <div style="position: fixed;left: 0px;top: 0px;opacity: 0.6;background-color: #bababa;border: 1.3px solid #878787;color: white;padding: 5px;text-shadow: -3px 2px 3px #000000;font-family: 'raleway', sans serif;font-size: 13px;text-transform: uppercase;border-bottom-right-radius: 10px;">Made by Christinagrande007</div>

> <center>
> <div style="width: 917px;height: 200px;border: 2px solid #a5a5a5;overflow: auto;padding: 30px;margin-bottom: 30px;margin-top: 730px;">
> <div class="main">
> <h4>About Me</h4>
> <p>text
> </div>
> </div>
> </center>

> </body>

> <style type="text/css">
> ::-webkit-scrollbar {
>   width: 5px;
>   height: 5px;
> }
> ::-webkit-scrollbar-button {
>   width: 0px;
>   height: 0px;
> }
> ::-webkit-scrollbar-thumb {
>   background: #0e5366;
>   border: 0px none #ffffff;
>   border-radius: 50px;
> }
> ::-webkit-scrollbar-thumb:hover {
>   background: #0e5366;
> }
> ::-webkit-scrollbar-thumb:active {
>   background: #0e5366;
> }
> ::-webkit-scrollbar-track {
>   background: transparent;
>   border: 0px none #ffffff;
>   border-radius: 0px;
> }
> ::-webkit-scrollbar-track:hover {
>   background: transparent;
> }
> ::-webkit-scrollbar-track:active {
>   background: transparent;
> }
> ::-webkit-scrollbar-corner {
>   background: transparent;
> }
> </style>
2

For one thing, all your styles should be the <head> of your document, not with after the closing </body> tag, and there shouldn’t be a <div> in your head.

Have you tried text-align: center; for your inline-block?

3

@Gandalf

Is this what you mean?

4

That should be applied to the parent element.

May I ask where you are learning this from?
This style of coding pre-dates your birth. :astonished: Things like <center> are long since obsolete. If you are learning html and css today, learn today’s methods from an up to date source. But remember we are here to help with that. :slight_smile:
I can point out a few things you are doing wrong and could improve your code.

3 Likes
5

That is the way to centre align an inline block element, and it is working. I suspect it is not what you’re asking. Which element are you trying to centre?

All those inline styles are not helping, and if you are positioning an element absolutely then that won’t be centred.

6

Hey.,
If you are trying to center align your links, they are already centered!. Changing the width of the absolute positioned div from 70% to 100% will do the trick. Great that you are starting at this age and just try to improve your code all the way you go.

Happy Coding
Regards!

7

Hi there Christinagrande007,

and a warm welcome to these forums. :winky:

Try it like this…

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>Emerald Scar</title>
<link rel="stylesheet" href="screen.css" media="screen">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Julius+Sans+One%7CLobster%7COpen+Sans%7CRaleway" media="screen">
<style media="screen">
body {
    background-color: #051522;
    background-image: url( http://i.imgur.com/tRkMr8r.jpg );
    background-repeat: no-repeat;
    background-size: 100%;
    text-align: center;
 }
#creator {
    position: fixed;
    left: 0;
    top: 0;
    padding: 0.3125em;
    border: 0.08em solid #878787;
    border-bottom-right-radius: 10px;
    background-color: rgba( 186, 186, 186, 0.6 );
    font-family: 'raleway', sans serif;
    font-size: 0.75em;
    color: white;
    text-transform: uppercase;
    text-shadow: -3px 2px 3px #000;
 }
#nav {
    padding: 25% 0 10% 0;
    margin: 0;
    list-style: none;
 }
#nav li {
    display: inline-block;
    margin: 0.5em;
 }
#nav  a {
    display: block;
    padding: 0.875em 1em;
    border-right: 0.08em solid #6d6d6d;
    background-color: rgba( 255, 255, 255, 0.75 );
    font-family: 'Julius Sans One', sans-serif;
    color: #565656;
    font-size: 1em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
 }
#nav a:hover {
     background-color: #444;
     color:#fff;
     transition-duration: 0.6s;
 }
#nav #active, #nav #active:hover  {
     background-color: #666;
     color: #fff;
 }
#main {
    width: 100%;
    max-width: 58em;
    border: 0.125em solid #a5a5a5;
    padding: 2em;
    box-sizing: border-box;
    margin: 0 auto 2em;
    color: #9a9a9a;
 }

h1 {
    font-family: 'Lobster', cursive;
    font-size: 1.625em;
 }
p { 
    font-family: 'Raleway', sans serif;
    font-size: 0.75em;
    letter-spacing: 1px;
    line-height: 200%;
    text-align: left;
 }
</style>
</head>
<body>
 <div id="creator" >Made by Christinagrande007</div>
 <ul id="nav">
  <li><a id="active" href="#1">link 1</a></li>
  <li><a href="http://www.hexrpg.com/wishlist/index.php?view=Emerald%20Scar">link 2</a></li>
  <li><a href="http://www.hexrpg.com/owl/Emerald%20Scar">link 3</a></li>
  <li><a href="http://www.hexrpg.com/trophy/index.php?user=Emerald%20Scar">link 4</a></li>
  <li><a href="http://www.hexrpg.com/my.php">link 5</a></li>
 </ul>
 <div id="main">
  <h1>About Me</h1>
  <p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero 
   bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh, 
   posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat. 
   Curabitur et volutpat nibh. Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta, 
   sapien nec molestie molestie, odio magna vestibulum lorem, vitae feugiat est leo sit amet 
   nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac magna sed, pretium commodo 
   odio. Sed porttitor augue velit, quis placerat diam sodales ac. Curabitur vitae porta ex. 
   Praesent rutrum ex fringilla tellus tincidunt interdum. Proin molestie lectus consectetur 
   purus aliquam porttitor. Fusce ac nisi ac magna scelerisque finibus a vitae sem.
  </p>
 </div>
</body>
</html>

coothead

4 Likes
8 
[quote="coothead, post:7, topic:270271"]
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"&gt;
&lt;title&gt;Emerald Scar&lt;/title&gt;
&lt;link rel="stylesheet" href="screen.css" media="screen"&gt;
&lt;link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Julius+Sans+One%7CLobster%7COpen+Sans%7CRaleway" media="screen"&gt;
&lt;style media="screen"&gt;
body {
    background-color: #051522;
    background-image: url( http://i.imgur.com/tRkMr8r.jpg );
    background-repeat: no-repeat;
    background-size: 100%;
    text-align: center;
 }
#creator {
    position: fixed;
    left: 0;
    top: 0;
    padding: 0.3125em;
    border: 0.08em solid #878787;
    border-bottom-right-radius: 10px;
    background-color: rgba( 186, 186, 186, 0.6 );
    font-family: 'raleway', sans serif;
    font-size: 0.75em;
    color: white;
    text-transform: uppercase;
    text-shadow: -3px 2px 3px #000;
 }
#nav {
    padding: 25% 0 10% 0;
    margin: 0;
    list-style: none;
 }
#nav li {
    display: inline-block;
    margin: 0.5em;
 }
#nav  a {
    display: block;
    padding: 0.875em 1em;
    border-right: 0.08em solid #6d6d6d;
    background-color: rgba( 255, 255, 255, 0.75 );
    font-family: 'Julius Sans One', sans-serif;
    color: #565656;
    font-size: 1em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
 }
#nav a:hover {
     background-color: #444;
     color:#fff;
     transition-duration: 0.6s;
 }
#nav #active, #nav #active:hover  {
     background-color: #666;
     color: #fff;
 }
#main {
    width: 100%;
    max-width: 58em;
    border: 0.125em solid #a5a5a5;
    padding: 2em;
    box-sizing: border-box;
    margin: 0 auto 2em;
    color: #9a9a9a;
 }
h1 {
    font-family: 'Lobster', cursive;
    font-size: 1.625em;
 }
p { 
    font-family: 'Raleway', sans serif;
    font-size: 0.75em;
    letter-spacing: 1px;
    line-height: 200%;
    text-align: left;
 }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;div id="creator" &gt;Made by Christinagrande007&lt;/div&gt;
 &lt;ul id="nav"&gt;
  &lt;li&gt;&lt;a id="active" href="#1"&gt;link 1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="http://www.hexrpg.com/wishlist/index.php?view=Emerald%20Scar"&gt;link 2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="http://www.hexrpg.com/owl/Emerald%20Scar"&gt;link 3&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="http://www.hexrpg.com/trophy/index.php?user=Emerald%20Scar"&gt;link 4&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="http://www.hexrpg.com/my.php"&gt;link 5&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;div id="main"&gt;
  &lt;h1&gt;About Me&lt;/h1&gt;
  &lt;p&gt;
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero 
   bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh, 
   posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat. 
   Curabitur et volutpat nibh. Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta, 
   sapien nec molestie molestie, odio magna vestibulum lorem, vitae feugiat est leo sit amet 
   nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac magna sed, pretium commodo 
   odio. Sed porttitor augue velit, quis placerat diam sodales ac. Curabitur vitae porta ex. 
   Praesent rutrum ex fringilla tellus tincidunt interdum. Proin molestie lectus consectetur 
   purus aliquam porttitor. Fusce ac nisi ac magna scelerisque finibus a vitae sem.
  &lt;/p&gt;
 &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
[/quote]

Thank you, this helped :slight_smile:

I have been learning these techniques from a website named w3schools.com. And I would love to have some pointers on my code, thank you :slight_smile:

9

Well @coothead has give a good example of how the page should be done, though it may need a bit of explanation as to why it’s better.
I can go thorough your original code and show where you are going wrong and how to improve it, but will have to get back to you with that a little later.

10

Hey Sam :slight_smile:
I just went through the code @coothead provided me with, and some things didn’t work very well, such as the viewport code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>Emerald Scar</title>
<link rel="stylesheet" href="screen.css" media="screen">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Julius+Sans+One%7CLobster%7COpen+Sans%7CRaleway" media="screen">
<style media="screen">
body {
    background-color: #051522;
    background-image: url( http://i.imgur.com/tRkMr8r.jpg );
    background-repeat: no-repeat;
    background-size: 100%;
    text-align: center;
 }
#creator {
    position: fixed;
    left: 0;
    top: 0;
    padding: 20px;
    border: 1px solid #878787;
    border-bottom-right-radius: 10px;
    background-color: rgba( 186, 186, 186, 0.6 );
    font-family: 'raleway', sans serif;
    font-size: 10px;
    color: white;
    text-transform: uppercase;
    text-shadow: -3px 2px 3px #000;
 }
#nav {
    padding: 20px;
    margin: 0;
    list-style: none;
 }
#nav li {
    display: inline-block;
    margin: 4px;
 }
#nav  a {
    display: block;
    padding: 10px;
    border-right: 1.3px solid #6d6d6d;
    background-color: rgba( 255, 255, 255, 0.75 );
    font-family: 'Julius Sans One', sans-serif;
    color: #565656;
    font-size: 13px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
 }
#nav a:hover {
     background-color: #444;
     color:#fff;
     transition-duration: 0.6s;
 }
#nav #active, #nav #active:hover  {
     background-color: #666;
     color: #fff;
 }
#main {
    width: 100%;
    top: 600px;
    max-width: 800px;
    border: 2px solid #a5a5a5;
    padding: 10px;
    box-sizing: border-box;
    margin: 0 auto 300px;
    color: #9a9a9a;
 }

p { 
    font-family: 'Raleway', sans serif;
    font-size: 12px;
    letter-spacing: 1px;
    line-height: 200%;
    text-align: left;
 }
</style>
</head>
<body>

 <div id="creator" >Made by Christinagrande007</div>

 <ul id="nav">
  <li><a id="active" href="#1">link 1</a></li>
  <li><a href="http://www.hexrpg.com/wishlist/index.php?view=Emerald%20Scar">link 2</a></li>
  <li><a href="http://www.hexrpg.com/owl/Emerald%20Scar">link 3</a></li>
  <li><a href="http://www.hexrpg.com/trophy/index.php?user=Emerald%20Scar">link 4</a></li>
  <li><a href="http://www.hexrpg.com/my.php">link 5</a></li>
 </ul>


 <div id="main">
  <h1>About Me</h1>
  <p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero 
   bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh, 
   posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat. 
   Curabitur et volutpat nibh. Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta, 
   sapien nec molestie molestie, odio magna vestibulum lorem, vitae feugiat est leo sit amet 
   nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac magna sed, pretium commodo 
   odio. Sed porttitor augue velit, quis placerat diam sodales ac. Curabitur vitae porta ex. 
   Praesent rutrum ex fringilla tellus tincidunt interdum. Proin molestie lectus consectetur 
   purus aliquam porttitor. Fusce ac nisi ac magna scelerisque finibus a vitae sem.

 </div>
</body>
</html>

The snippet of code below shows up when I run it… any idea what went wrong? I can’t seem to figure it out.

ta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

~ Christina G :smiley:

11

How are you writing your code? MSWord? DreamWeaver?

What is wrong? It looks like coothead’s code to me.
I
Where exactly in w3Schools are your lessons and code examples presented?

12

Well the link is here, if you want to see how it looks :slight_smile:

13

His original code he posted works just fine for me. The version you posted has changed a bit, but I don’t get any problem with the viewport tag. It’s mainly that you removed the padding that makes the menu clear the heading of the page.

Going back to your original code.
To begin with, you must start with the doctype declaration and opening html tag which were omitted from the post. you need these to be valid. If in doubt, use the validator to check your code for errors, it’s a important tool.
Speaking of important, the css gets off to a bad start too:-

Avoid using !important in your css, it can be very damaging. It should only be used in vary rare cases when you absolutely need to, which is almost never. If you find that you “absolutely need to” with any frequency, then the chances are you are doing something wrong somewhere.
In this case there is absolutely no need for it.

When it comes to font sizes (or any property relating to text) it’s best to avoid px as it’s a fixed unit and can prevent people the freedom to alter their browsers default font size. Best to use relative units like em or rem.

Kudos for that. That’s best for accessibility, when you want text in caps, don’t use caps, use text-transform: uppercase :+1:

You can’t have any content inside of the head section, it must be inside the body section. Again, the validator will tell you this, use it.

In-line style attributes are another thing to be avoided, they are notoriously unmaintainable, inflexible and make for ugly, inflated html. Keep all your styling in the css.

Another thing to avoid, unless you absolutely need to and know what you are doing. That is absolute positioning, for the most part you should not need it and only use it in a few special edge cases. Keep your content in the natural document flow as much as possible.

This elements is obsolete, not a part of html5. It’s a thow-back to the days before we had css and had to use html elements and attribute to control styling and layout. Anything to do with styling and layout should be done with css.
You can centre a block element by giving the side margins a value of auto as seen in coothead’s example margin: 0 auto 2em; where 0 defines the top margin, auto is both sides and 2em is the bottom margin.
Notice how the 0 has no unit specified, it doesn’t need one, as 0 is the same in any unit of measure, so don’t use 0px.

Headings should follow a hierarchy, starting with h1 as the first and main heading then any sub-headings following being h2 and so on. Same level subheadings should of course be the same. If the size of h1 is too much, change it via css.

Also avoid fixed widths and heights. Widths need to be flexible for a page to be responsive and display on any size screen. Where you may wan to use width in a fixed unit, use max-width instead. Height should be flexible too and defined by the content within, if you want more space in an element, use padding or min-height.

The style tags should only be found in the head section of the document, you don’t need the type attribute in html5.

5 Likes
14

Thank you so much!
I’ve learned quite a bit from this… it will really help me in the future :slight_smile:

15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.