web-dev-qa-db-ja.com

Bootstrap 4センターブロックをセンタリングできません

私は次のbootstrap htmlコードを持っています（そのJSXはclassNameですが、考え方は同じです）：

<div className="toggleView btn-group center-block" role="group" aria-label="Basic example">
        <button onClick={this.handleTimelineClick} type="button" className={this.state.toggleCalendar == false ? "btn btn-secondary active" : "btn btn-secondary"}>Timeline</button>
        <button onClick={this.handleCalendarClick} type="button" className={this.state.toggleCalendar == true ? "btn btn-secondary active " :"btn btn-secondary"}>Calendar</button>
 </div>

私はこのコードをbootstrap center-blockまたはCSSのいずれかで中心にしようとしていますが、動作するようには見えません：

enter image description here

緑のバーはdiv toggleViewを強調表示します。

私が使用している唯一のCSSは次のとおりです。

.toggleView {
    padding: 20px;
}

このボタングループを中央に配置できないのはなぜですか？

htmlcsstwitter-bootstrapbootstrap-4
23
ApathyBear

btn-groupにはdisplay:inline-blockがあるため、親コンテナーでtext-centerを使用します。

http://codeply.com/go/hyUYkUrtRN

注：Bootstrap 4では、center-blockがmx-autoになり、margin: 0 auto;要素をセンタリングするためのdisplay:blockを表します。 Bootstrap 4にはd-blockクラスもあるため、インライン要素をdisplay：blockのようにすることができます。

<img src=".." class="d-block mx-auto" >

次も参照してください。 Bootstrap 4の列内のコンテンツを中央に配置

50
Zim

ブートストラップ4にはcenter-blockがありませんが、代わりにd-block mx-autoを使用して、表示をブロックに設定し、左右のマージンを自動に設定します。

6
Greg Gum

ブートストラップ4（2017-08-16現在）はd-blockを使用し、中心にmx-autoを使用します。

6
Salvador Cervantes