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

Question

背景

![

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

となってしまいます。

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が入ってしまいます。
上手くいかない原因は何になりますでしょうか？

Answer 1

ブロック要素(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;
}

Comments

[otaks]

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

Answer 2

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

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

.titlecard__next {
  text-align:center;
}

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

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

Comments

[otaks]

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