質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.82%

div要素のセンタリング(中央寄せ)がうまくできない

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 229

otaks

score 217

背景

![イメージ説明

↑のようにしたいのですが、

イメージ説明

となってしまいます。

webで調べた所、マージンを自動設定にしたら良いとあったので、

        <div classs="titlecard__next">
            <div class="button is-info is-outlined titlecard__next__core">続きを読む</div>
        </div>
    .titlecard
        &__next
            width: 100%;
            &__core
                margin: 0 auto;

としましたが、buefyを使っていることもあるからか、意図した通りに
ならない状況です。

※chromeの開発ツールでのCSSは以下の通り

element.style {
}
<style>
.button.is-info.is-outlined {
    background-color: transparent;
    border-color: #167df0;
    color: #167df0;
}

<style>
.titlecard__next__core[data-v-1700d00e] {
    margin: 0 auto;
}
<style>
.button.is-info {
    background-color: #167df0;
    border-color: transparent;
    color: #fff;
}
<style>
.button {
    background-color: white;
    border-color: #dbdbdb;
    border-width: 1px;
    color: #363636;
    cursor: pointer;
    justify-content: center;
    padding-bottom: calc(0.375em - 1px);
    padding-left: 0.75em;
    padding-right: 0.75em;
    padding-top: calc(0.375em - 1px);
    text-align: center;
    white-space: nowrap;
}
<style>
.button, .input, .taginput .taginput-container.is-focusable, .textarea, .select select, .file-cta, .file-name, .pagination-previous, .pagination-next, .pagination-link, .pagination-ellipsis {
    -moz-appearance: none;
    -webkit-appearance: none;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 4px;
    box-shadow: none;
    display: inline-flex;
    font-size: 1rem;
    height: 2.25em;
    justify-content: flex-start;
    line-height: 1.5;
    padding-bottom: calc(0.375em - 1px);
    padding-left: calc(0.625em - 1px);
    padding-right: calc(0.625em - 1px);
    padding-top: calc(0.375em - 1px);
    position: relative;
    vertical-align: top;
}
<style>
.delete, .modal-close, .is-unselectable, .button, .file, .breadcrumb, .pagination-previous, .pagination-next, .pagination-link, .pagination-ellipsis, .tabs, .carousel, .carousel-list, .b-checkbox.checkbox, .b-radio.radio, .switch {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
<style>
*, *::before, *::after {
    box-sizing: inherit;
}
user agent stylesheet
div {
    display: block;
}
<style>
body {
    color: #4a4a4a;
    font-size: 1em;
    font-weight: 400;
    line-height: 1.5;
}
<style>
body, button, input, select, textarea {
    font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
<style>
html {
    background-color: white;
    font-size: 16px;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    min-width: 300px;
    overflow-x: hidden;
    overflow-y: scroll;
    text-rendering: optimizeLegibility;
    text-size-adjust: 100%;
}
user agent stylesheet
html {
    color: -internal-root-color;
}
<style>
*, *::before, *::after {
    box-sizing: inherit;
}
<style>
*, *::before, *::after {
    box-sizing: inherit;
}
mar

質問

上記内の、

.titlecard__next__core[data-v-1700d00e] {
    margin: 0 auto;
}


で左右のマージンは自動設定していますが、なぜか0が入ってしまいます。
上手くいかない原因は何になりますでしょうか?

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

0

.buttonクラスに対してdisplay: inline-flex;がかかっているからではないでしょうか?
margin:auto;で左右中央に配置する方法はインライン要素には効きません。

display: inline-flex;の要素を左右中央に配置したいなら、

.titlecard__next {
  text-align:center;
}


とするのがよいかと思います。

ちなみに、.titlecard__next__coredisplay:block;にしてmargin:auto;で左右中央に置いてもよいですが、その場合は.titlecard__next__coreにwidthを設定する必要が出てくるのでおすすめしません。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/03/01 15:34

    ありがとうございます
    text-align:center;を試してみましたが状況は変わりませんでしたので
    「ちなみに~」で対応できました(width設定を追加)

    キャンセル

0

ブロック要素(div)にwidthを指定変換しないと、親要素の幅一杯に広がりますので、auto にしても余白は0になります。

適切なwidthを設定してください。

.titlecard__next__core {
  width: 100px;
  margin: 0 auto;
}

追記
ボタンにinline-flexが設定されているようですね。
ならば、flexで中央寄せするがいいでしょう。

.titlecard__next {
  width: 100%;
  display: flex;
  justify-content:center;
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/03/01 15:33

    ありがとうございます
    追記の記載内容で試してみましたが状況は変わりませんでした

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.82%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る