左寄せのまま中央配置したいのですがどうか教えてください

Question

前提・実現したいこと

wordpressのスポイラー箇所で、タイトルを左寄せしたまま中央配置したいのですが、詳しい方教えていただけませんでしょうか？

中央配置にはなるのですが、左寄せのままができなくずれてしまいます。

該当のソースコード

css

.ac-container{
width: auto;
margin: 30px auto;
text-align: center;
}
.ac-container label{
width: 75%;
text-align: left;
background: #e6eae3;
margin: 0 auto;
padding: 5px 5px 5px 5px;
position: relative;
display: block;
height: 40px;
cursor: pointer;
color: #56564b;
}
.ac-container label:hover{
background: #d4dcd6;
-webkit-transition: all .3s;
transition: all .3s;
}
.ac-container label:before{
color: #56564b;
font-family:"FontAwesome";
content:"\f055";
}
.ac-container input:checked ~ label::before {
color: #56564b;
font-family:"FontAwesome";
content:"\f056";
}
.ac-container input{
display: none;
}
.ac-container div{
background: rgba(255, 255, 255, 0.5);
margin-top: -1px;
overflow: hidden;
height: 0px;
position: relative;
z-index: 10;
transition:
height 0.3s ease-in-out,
box-shadow 0.6s linear;
}
.ac-container input:checked ~ div{
transition:
height 0.5s ease-in-out,
box-shadow 0.1s linear;
box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}
.ac-container div p{
color: #777;
line-height: 23px;
font-size: 14px;
padding: 20px;
}
/* 高さの定義 */
.ac-container input:checked ~ div.ac-small{
height: auto;
}
.ac-container input:checked ~ div.ac-medium{
height: 200px;
}
.ac-container input:checked ~ div.ac-large{
height: 300px;
}

HTML

<div class="ac-container"> <input id="ac-1" name="accordion-1" type="checkbox">

<label for="ac-1">サイト利用規約</label>

<div class="ac-container"> <input id="ac-2" name="accordion-2" type="checkbox"> <label for="ac-1">個人情報保護方針</label>

このlabelの箇所の文字を左寄せのまま中央配置したいのですがうまくいきません。
.ac-container label:before{
color: #56564b;
font-family:"FontAwesome";
content:"\f055";
これも含め左寄せのまま中央配置したいのです。
現在は文字数が1段目と2段目が違うため中央によってはいますが、左寄せにはなっていません。
どうかお力を貸していただきたいです。

Answer 1

「左寄せのまま中央配置」というのは矛盾した表現ですが、下記のようなことでしょうか。

長い方のテキストを中央寄せして、短い方のテキストをその左端に揃える（下記の□の位置を揃えたい。）。

-------------------------------------
         □サイト利用規約

         □個人情報保護方針
-------------------------------------

もしそうなら、現状のHTMLのままだとJSを使わないと難しいでしょうね。

簡易的な方法ですが全角空白でテキスト長を揃えるという方法はどうでしょうか。

<div class="ac-container">
  <input id="ac-1" name="accordion-1" type="checkbox">
  <label for="ac-1">サイト利用規約　</label>
</div>

<div class="ac-container">
  <input id="ac-2" name="accordion-2" type="checkbox">
  <label for="ac-1">個人情報保護方針</label>
</div>

.ac-container label{
    width: 75%;
    text-align: center;
以下略

Comments

[moganbo]

ありがとうございます！
大変助かりました。
全角スペースを入れる発想はありませんでしたが解決できました。
1週間以上悩んでいたので大変助かりました

Answer 2

親要素にdisplay: flex;とjustify-content: center;を指定すると中央に配置することができると思います。

CodePenで試しに作ってみました

<div class="parent">
  <div class="box">
    <p>
      ああああああああああああああああああああああああ<br>
      いいいいいいいいいいいいいいい
    </p>  
  </div>
</div>

.parent {
  display: flex;
  justify-content: center;
}
.box {
  padding: 30px;
  background: #f00;
}

---

追記:
最終的な姿がわからないので勘になってしまいますが、こちらでいかがでしょうか?
<label>内に<input type="checkbox">を置くと、「サイト利用規約」など文字の部分も押せるようになるので
そのようにしています。

<div class="ac-container">
  <div>
    <label for="ac-1">
      <input id="ac-1" name="accordion-1" type="checkbox">
      サイト利用規約
    </label>
    <label for="ac-1">
      <input id="ac-2" name="accordion-2" type="checkbox">
      個人情報保護方針
    </label>
  </div>
</div>

.ac-container {
  width: auto;
  margin: 30px auto;
  text-align: center;
  
  display: flex; /* 追加 */
  justify-content: center; /* 追加 */
}
.ac-container label {
  /* width: 75%; */
  text-align: left;
  background: #e6eae3;
  margin: 0 auto;
  padding: 5px 5px 5px 5px;
  position: relative;
  display: block;
  height: 40px;
  cursor: pointer;
  color: #56564b;
}

.ac-container label:hover {
  background: #d4dcd6;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.ac-container label:before {
  color: #56564b;
  font-family: "FontAwesome";
  content: "\f055";
}

.ac-container input:checked~label::before {
  color: #56564b;
  font-family: "FontAwesome";
  content: "\f056";
}

.ac-container input {
  display: none;
}
/*
.ac-container div {
  background: rgba(255, 255, 255, 0.5);
  margin-top: -1px;
  overflow: hidden;
  height: 0px;
  position: relative;
  z-index: 10;
  transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}
*/

.ac-container input:checked~div {
  transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
  box-shadow: 0px 0px 0px 1px rgba(155, 155, 155, 0.3);
}

.ac-container div p {
  color: #777;
  line-height: 23px;
  font-size: 14px;
  padding: 20px;
}


/* 高さの定義 */

.ac-container input:checked~div.ac-small {
  height: auto;
}

.ac-container input:checked~div.ac-medium {
  height: 200px;
}

.ac-container input:checked~div.ac-large {
  height: 300px;
}

Comments

[moganbo]

ありがとうございます！！

すみません初心者のためわからないことが多くて、これをどう書き換えて良いのか教えていただけないでしょうか.....
この<P>で<LABEL>を囲んでしまって良いものなんでしょうか？

[new1ro]

<label>の親要素 (.ac-containerでしょうか?) に
display: flex;
justify-content: center;
を指定してみてください。

あとソースコードは「```」で囲ってもらえると読めるようになるので回答者も増えると思います。
```
(ソースコード)
```

[moganbo]

ご親切にありがとうございました！