Bootstrap 3 Navbar의 브랜드 로고 중심

Bootstrap 3 Navbar의 브랜드 로고 중심

---

브랜드 로고가 항상 중간에 유지되도록 Bootstrap 3 navbar를 구현하려고합니다. 다음은 코드입니다.

<div class="navbar navbar-fixed-top navbar-default">
  <div class="navbar-inner">
    <div class="container">

      <button type="button" style="float: left;" class="pull-left btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
    
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
    
                </button>

      <a class="brand" style="margin: 0; float: none;" href="#">
        <img src="/Content/themes/next/images/logo.png" /></a>

      <div class="nav-collapse">

        <ul class="nav">
          <li> <a href="#">Item 1</a></li>
          <li> <a href="#">Item 1</a></li>
          <li> <a href="#">Item 1</a></li>
        </ul>
      </div>

      <ul class="nav pull-right">
        <li>
          <a href="#">
            <div class="nextCog"></div>
          </a>
        </li>
      </ul>

      <span class="navbar-text pull-right">superpup1 </span>

    </div>
  </div>
</div>

보기 좋은 navbar를 만듭니다.

다만 로고 (녹색)가 지속적으로 중간에 남아 있으면 좋겠습니다. 이 스타일을 "brand"클래스로 태그에 추가합니다.

<a class="brand" style="margin: 0; float: none; text-align:center" href="#">
                <img src="/Content/themes/next/images/logo.png" /></a>

부분적으로 문제를 해결합니다. 로고는 중간에 있지만 나머지 navbar 요소를 아래로 밀어냅니다.

이것은 내가 제거하고 싶은 바람직하지 않은 효과입니다. 해결책을 제안 해 주시겠습니까? 시작부터 로고를 중앙에 배치하는 것이 잘못된 접근일까요?

---

이 시도:

.navbar {
    position: relative;
}
.brand {
    position: absolute;
    left: 50%;
    margin-left: -50px !important;  /* 50% of your logo width */
    display: block;
}

확대 및 축소 할 때 문제가 발생하지 않도록 로고를 50 % 중앙에 로고 너비의 절반을 빼십시오.

바이올린 참조

---

가장 간단한 방법은 CSS 변환입니다 .

.navbar-brand {
  transform: translateX(-50%);
  left: 50%;
  position: absolute;
}

데모 : http://codepen.io/candid/pen/dGPZvR

---

이 방법 은 로고의 동적 크기 배경 이미지 에서도 작동 하며 텍스트 숨김 클래스를 활용할 수 있습니다.

CSS :

.navbar-brand {
  background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat;
  transform: translateX(-50%);
  left: 50%;
  position: absolute;
  width: 200px; /* no height needed ... image will resize automagically */
}

HTML :

<a class="navbar-brand text-hide" href="http://disputebills.com">Brand Text
        </a>

---

그래도 flexbox를 사용할 수도 있습니다. 그러나,이 방법을 사용하여 우리는 이동해야 할 것 navbar-brand외부의 navbar-header. 이 방법은 이제 이미지와 텍스트를 나란히 가질 수 있기 때문에 좋습니다.

.brand-centered {
  display: flex;
  justify-content: center;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}
.navbar-brand {
  display: flex;
  align-items: center;
}

데모 : http://codepen.io/candid/pen/yeLZax

모바일에서만 이러한 결과를 얻으려면 위의 CSS를 미디어 쿼리 안에 래핑하면됩니다.

@media (max-width: 768px) {

}

---

2018 년 업데이트

부트 스트랩 3

이 예제가 도움이되는지 확인하십시오. http://bootply.com/mQh8DyRfWY

브랜드를 중심으로 ..

.navbar-brand
{
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    text-align: center;
    margin: auto;
}

마크 업은 3이 아닌 Bootstrap 2에 대한 것 navbar-inner입니다. 더 이상 .

편집-다른 접근 방식은 transform: translateX(-50%);

.navbar-brand {
  transform: translateX(-50%);
  left: 50%;
  position: absolute;
}

http://www.bootply.com/V7vKDfk46G

Bootstrap 4

In Bootstrap 4, mx-auto or flexbox can be used to center the brand and other elements. See How to position navbar contents in Bootstrap 4 for an explanation.

Also see:

Bootstrap NavBar with left, center or right aligned items

---

Old question, but just for posterity.

I've found the easiest way to do it is to have the image as the background image of the navbar-brand. Just makes sure to put in a custom width.

.navbar-brand
{
    margin-left: auto;
    margin-right: auto;
    width: 150px;
    background-image: url('logo.png');
}

---

A solution where the logo is truly centered and the links are justified.

The max recommended number of links for the nav is 6, depending on the length of the words in eache link.

If you have 5 links, insert an empty link and style it with:

class="hidden-xs" style="visibility: hidden;"

in this way the number of links is always even.

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<style>
  .navbar-nav > li {
    float: none;
    vertical-align: bottom;
  }
  #site-logo {
    position: relative;
    vertical-align: bottom;
    bottom: -35px;
  }
  #site-logo a {
    margin-top: -53px;
  }
</style>
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Nav</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav nav-justified navbar-nav center-block">
        <li class="active"><a href="#">First Link</a></li>
        <li><a href="#">Second Link</a></li>
        <li><a href="#">Third Link</a></li>
        <li id="site-logo" class="hidden-xs"><a href="#"><img id="logo-navbar-middle" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32877/logo-thing.png" width="200" alt="Logo Thing main logo"></a></li>
        <li><a href="#">Fourth Link</a></li>
        <li><a href="#">Fifth Link</a></li>
        <li class="hidden-xs" style="visibility: hidden;"><a href="#">Sixth Link</a></li>
      </ul>
    </div>
  </div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

To see result click on run snippet and then full page

Fiddle

참조 URL : https://stackoverflow.com/questions/23400234/centering-brand-logo-in-bootstrap-3-navbar