CODEWITHSUNDEEP
htmlcss
IVCatalina
IVCatalina

Reputation: 356

Links won't sit centered

Can anyone tell me why this won't sit centered? I want 2 items on 1 line, and 2 on the other (which it's doing), but both centered. I just can't work it out. Thanks in advance!

https://jsfiddle.net/npp2dyvz/

<div class="cattopmobile">
  <h2><a href="/wallets">WALLETS</a></h2>
  <h2><a href="/bags">BAGS</a></h2>
  <h2><a href="/accessories">ACCESSORIES</a></h2>
  <h2><a style="border-right:none!important;" href="/travel">TRAVEL</a></h2>
</div>

CSS:

.cattopmobile h2 {
  text-align: center;
}

.cattopmobile {
  display: block;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  text-align: center;
}

.cattopmobile h2 a {
  display: inline-block;
  float: left;
  width: auto;
  text-align: center;
  color: #837b62;
  font-size: 1.25em;
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: #837b62;
  padding-right: 4%;
  padding-left: 4%;
  margin-bottom: 20px;
}

Upvotes: 0

Views: 58

Answers (4)

J. Carter
J. Carter

Reputation: 19

IVCatalina.

Are you trying to move to a different part of the page or going to a completely different page? Well, if you are going to a different part of your page you need to have the '#' in front of it and not a slash. If you are going to a completely different page then you need to add the extension the page; htm, html, php, aspx, cs, etc, and you don't need the slash at the beginning if the source of that file is in the same folder as the page you are trying to access it from.

Hope this helps!

J Carter

Upvotes: 0

Mahaveer
Mahaveer

Reputation: 435

Since you need 2 items per row ( line )
Change the width to 40% in .cattopmobile h2 a { width : 40% approx; float:left } not 50% because of borders etc it will become more than 50% and you still wont get 2 elements per row. Now it should work. Width auto assigns width automatically and since your elements are inline, more elements are pushed in the line if there is enough space.

Upvotes: 0

Scott
Scott

Reputation: 21890

Style the h2 tags to be inline (without floats), not their internal anchors.... h2 for position... a for appearance.

h2 tags are block elements by default, so they won't be inline. You're kind of "hacking" the anchors inside the h2 tags. Dealing properly with the block-level elements (h2) would be my preferred method.

.cattopmobile h2 {
    display: inline-block;
    border-right-style: solid;
    border-right-width: 1px;
    border-right-color: #837b62;
    padding-right: 4%;
    padding-left: 4%;
    margin-bottom: 20px;
   text-align: center;
}
.cattopmobile h2 a {
  color: #837b62;
  font-size: 1.25em;
}

Updated Fiddle

Upvotes: 2

BenM
BenM

Reputation: 53228

You're floating to the left of their container. Remove the float: left CSS rule from .cattopmobile h2 a:

.cattopmobile h2 a {
    border-right: 1px solid #837b62;
    color: #837b62;
    display: inline-block;
    font-size: 1.25em;
    margin-bottom: 20px;
    padding: 0 4%;
    text-align: center;
}

Note the other changes I've made aren't necessary, but I've added them for clarity. If you want 2 links per line, you'll need to deal with your <h2> elements, too.

Also, why are you wrapping what seems to be a navigation menu in <h2> elements? Why not use the <nav> element with <ul>?

Upvotes: 3

Related Questions