'spanX'클래스로 부트 스트랩 div를 중앙에 어떻게 배치합니까?

'spanX'클래스로 부트 스트랩 div를 중앙에 어떻게 배치합니까?

---

나는 부트 스트랩을 사용하고 다음과 같이 div (span7)를 중앙에 배치하려고합니다.

<div class="row-fluid">
    <div id="main" class="span7">
        Lorem ipsum dolor sit amet
    </div>
</div>

내 CSS 코드는 다음과 같습니다.

#main{
    margin:0px auto;
}

그러나 그것은 중앙에 설정되어 있지 않습니다. 센터 설정은 어떻게하나요?

편집하다

span7이제 col-7Bootstrap 4에 있습니다.

---

Twitter의 부트 스트랩 .span클래스는 왼쪽으로 떠 다니므로 일반적인 방법으로 중앙에 배치되지 않습니다. 따라서 중앙 span에 배치 float:none하려면 #main규칙에 추가 하십시오 .

CSS

#main {
 margin:0 auto;
 float:none;
}

---

귀하의 경우에 덧붙여, span클래스가 짝수 (예 span8) 당신은 추가 할 수 있습니다 offset를 중앙에 클래스를 - 위해 span8그 것 offset2(기본 12 열 그리드를 가정), 위해 span6가 될 것이다 offset3그래서 기본적으로 (에, 나머지 수의 절반 span그리드의 총 열 수에서 -number 를 뺀 경우 열).

UPDATE Bootstrap 3 은 많은 클래스의 이름을 변경 했으므로 중간 크기의 반응 형 그리드를 사용한다고 가정하면 모든 span*클래스는이어야 col-md-*하고 offset클래스는이어야합니다 col-md-offset-*.

여기에 간단한 데모를 만들었습니다 . 도움이되기를 바랍니다. http://codepen.io/anon/pen/BEyHd .

---

누군가 부트 스트랩 행 유체를 사용하여 범위 내에서 이미지와 텍스트를 중앙에 배치하는 진정한 솔루션을 원한다면 다음과 같습니다 (이를 구현하는 방법과 설명은 내 예를 따릅니다).

CSS

div.row-fluid [class*="span"] .center-in-span { 
   float: none; 
   margin: 0 auto; 
   text-align: center; 
   display: block; 
   width: auto; 
   height: auto;
}

HTML

<div class="row-fluid">
   <div class="span12">
      <img class="center-in-span" alt="MyExample" src="/path/to/example.jpg"/>
   </div>
</div>

<div class="row-fluid">
   <div class="span12">
      <p class="center-in-span">this is text</p>
   </div>
</div>

사용법 :이 CSS를 사용하여 범위 내에서 이미지를 중앙에 배치하려면 위와 같이 .center-in-span 클래스를 img 요소에 적용하면됩니다.

이 CSS를 사용하여 범위 내에서 텍스트를 가운데에 맞추려면 위에 표시된대로 .center-in-span 클래스를 p 요소에 적용하면됩니다.

설명 :이 CSS는 특정 부트 스트랩 스타일을 재정의하기 때문에 작동합니다. 게시 된 다른 답변과의 눈에 띄는 차이점은 너비와 높이가 자동으로 설정되어 있으므로 고정을 사용할 필요가 없습니다 (동적 웹 페이지에 적합). 또한 여백을 auto, text-align : center 및 display : block으로 설정하는 조합은 이미지와 단락을 모두 처리합니다.

이것이 쉬운 구현을 위해 충분히 철저한 지 알려주십시오.

---

최신 정보

BS3부터 .center-block도우미 클래스가 있습니다. 문서에서 :

// Classes
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as mixins
.element {
  .center-block();
}

이 단순 해 보이는 문제에는 숨겨진 복잡성이 있습니다. 주어진 모든 답변에는 몇 가지 문제가 있습니다.

1. 사용자 지정 클래스 만들기 (Major Gotcha)

만들기 .col-centred수업을하지만, 주요 잡았다가있다.

.col-centred {
   float: none !important;
   margin: 0 auto;
}

<!-- Bootstrap 3 -->
<div class="col-lg-6 col-centred">
  Centred content.
</div>
<!-- Bootstrap 2 -->
<div class="span-6 col-centred">
  Centred content.
</div>

고차

부트 스트랩은 최대 12 개까지 열을 추가해야합니다. 그렇지 않으면 겹치게되므로 문제가됩니다. 이 경우 중앙에있는 열이 그 위에있는 열과 겹칩니다. 시각적으로 페이지가 동일하게 보일 수 있지만 겹치는 열에서는 마우스 이벤트가 작동하지 않습니다 (예 : 링크를 가리 키거나 클릭 할 수 없음). 클릭하려는 요소와 겹치는 가운데 열에 마우스 이벤트가 등록되기 때문입니다.

수정 사항

You can resolve this issue by using a clearfix element. Using z-index to bring the centred column to the bottom will not work because it will be overlapped itself, and consequently mouse events will work on it.

<div class="row">
  <div class="col-lg-12">
    I get overlapped by `col-lg-7 centered` unless there's a clearfix.
  </div>
  <div class="clearfix"></div>
  <div class="col-lg-7 centred">
  </div>
</div>

Or you can isolate the centred column in its own row.

<div class="row">
  <div class="col-lg-12">
  </div>
</div>
<div class="row">
  <div class="col-lg-7 centred">
    Look I am in my own row.
  </div>
</div>

2. Use col-lg-offset-x or spanx-offset (Major Gotcha)

<!-- Bootstrap 3 -->
<div class="col-lg-6 col-lg-offset-3">
  Centred content.
</div>
<!-- Bootstrap 2 -->
<div class="span-6 span-offset-3">
  Centred content.
</div>

The first problem is that your centred column must be an even number because the offset value must divide evenly by 2 for the layout to be centered (left/right).

Secondly, as some have commented, using offsets is a bad idea. This is because when the browser resizes the offset will turn into blank space, pushing the actual content down the page.

3. Create an Inner Centred Column

This is the best solution in my opinion. No hacking required and you don't mess around with the grid, which could cause unintended consequences, as per solutions 1 and 2.

.col-centred {
   margin: 0 auto;
}

<div class="row">
  <div class="col-lg-12">
    <div class="centred">
        Look I am in my own row.
    </div>
  </div>
</div>

---

Define the width as 960px, or whatever you prefer, and you're good to go!

#main {
 margin: 0 auto !important;
 float: none !important;
 text-align: center;
 width: 960px;
}

(I couldn't figure this out until I fixed the width, nothing else worked.)

참고URL : https://stackoverflow.com/questions/9554724/how-do-i-center-a-bootstrap-div-with-a-spanx-class