CODEWITHSUNDEEP
csstwitter-bootstrap
Matthew
Matthew

Reputation: 865

Cannot center menu bar with CSS

Using Bootstrap, I cannot figure out what I need to center "MiDs" element so that it lines up with the rest but the black goes off the edges like it currently is.

Upvotes: 1

Views: 1609

Answers (7)

vonsko
vonsko

Reputation: 395

.topbar h3 a, .topbar .brand {
  color: #FFFFFF;
  font-size: 20px;
  font-weight: 200;
  line-height: 1;
  padding: 8px 20px 12px;
}

remove float ?

Upvotes: 0

Mr.T.K
Mr.T.K

Reputation: 2356

Try this..

<div class="container-fluid">
<span><a class="brand" href="/index.php">MiDs</a></span>
---------
-------
------
</div>

/*css*/

.container-fluid span {
display:block;
width:100px;
margin:0 auto;
}

Upvotes: 0

Beatriz Oliveira
Beatriz Oliveira

Reputation: 659

I assume you need to center element .container-fluid. If so, edit style as follows:

.container-fluid {
...
/* min-width: 940px; remove this line */
width: 940px;
margin: 0 auto;
}

Upvotes: 3

sicks
sicks

Reputation: 767

I think what I was asking for in this question <-check the fiddle there to see

For the black div:

position: absolute;
left: 0;
right: 0;

That will make it extend to the edges of the browser regardless of how wide it gets.

Then make another div, and margin-left: the width of the side menu, so it pushes "MiDs" and whatever other content you put in there to the right of the side menu.

If you want it centered, set a width to it and use margin: auto;

Upvotes: 0

Greg Pettit
Greg Pettit

Reputation: 10830

There are probably a million ways to skin this cat, but what I would do is add an extra class to the div that has your link in it (it already has container-fluid as a class).

You need a class that overrides container-fluid's margins because you need auto margins. Guess which class does that? Wrap! So add wrap to that div and the entire thing will be aligned with your content. The text is not centered within yet; it is on the left of the now-centered div.

I didn't dig much deeper than that in terms of markup, but I suspect you won't need your old ancestor wrap element anymore; it was probably there because it seemed like the place to put it (wrapping up stuff you wanted in there!) but I believe it just needed to be more deeply nested in order to escape the fixed positioning of the top bar.

Did you still need to center the text itself? You'll need to unfloat the anchor and then adjust the padding accordingly since it gets moved into the document flow.

Upvotes: 0

JesseBuesking
JesseBuesking

Reputation: 6586

What I'd do is create a div within the black bar that's the same width as the rest of the page, and center that. If you put MiDs in that, it will line up with the rest of the page.

Upvotes: 0

Jason Gennaro
Jason Gennaro

Reputation: 34855

Add this

margin: 0px 50% -40px 50%;

to

.brand

Upvotes: 0

Related Questions