中央にする

送信ボタンを中央にする

<div>で囲む
<div><input type=”submit” value=”送 信”></div>

CSSに記入
div { text-align : center ; }

上記でセンターにならない時
.wpcf7 div {
text-align: center;
float: none;}
※float:はnoneにする。

文章を左揃えぞろえのまま中央に寄せる

テキスト表示にして下記のhtmlをコピペする 
<div class=”sample”>
<p class=”text”>
あいうえおかきくけこ<br/>
さしすせそ<br/>
たちつてとなにぬねのはひふへほ
</p>
</div>
※文字の大きさは、ビジュアル表示に切り替えて変えたい文字をドラッグ、メニューバーのフォントサイズで変える。

プラグインSiteOrigin CSSなどを追加したりしてそこに下記のCSSをコピペ
.sample {
margin: 16px auto;
text-align: center;
display: block;
border: 1px solid #000;
}
.sample .text {
text-align: left;
display: inline-block;
}
※行間隔の調整は border: 1px solid #000; の下に line-height:1.5; を追加する。数字を大きくすると行の間隔があく。
※枠線を消すには border: none; に変更する。

Liタグの場合
html
<div class=”sample”>
<ul>
<li>あいうえおかきくけこ</li>
<li>さしすせそ</li>
<li>たちつてとなにぬねのはひふへほ</li>
</ul>
</div>

CSS
.sample {
margin: 16px auto;
text-align: center;
display: block;
border: 1px solid #000;
}
.sample ul {
padding-left: 0;
list-style: none;
display: inline-block;
}
.sample ul li {
text-align: left;
}
※liにdisplay:inline-blockを設定すると文字がすべてつながってしまうので、ulの方に設定する。liにはtext-align:leftのみを設定する。
参照:https://blog.raizzenet.com/how-to-make-the-text-left-justified-by-centering/

写真を中央に

CSSに下記コピペ
.gazocenter {
text-align: center !important;
}
ビルダーのプラグイン使用の時は
ウィジェットのテキストとかの編集をクリック
ウェジェットのスタイルの属性のWidget Classに「gazocenter」(半角英数であればなんでもOK)と入力
終了
更新

上部へスクロール