YouTubeを中央寄せにする方法
CSSに追記すると自動的に中央寄せになります。
/*YouTube中央寄せ*/
.video-container{
margin:0px auto;
}Twitterを中央寄せにする方法
CSSに追記すると自動的に中央寄せになります。
/*Twitter中央寄せ*/
.twitter-tweet{
margin:0px auto;
}タイムラインを中央寄せしたい場合は次のコードを追記します。
/*Twitterタイムライン中央寄せ*/
.twitter-timeline{
margin:0px auto;
}ついでに幅も指定したい場合は、これを追記します。
width:400px !important;
ただし、AMPの場合は確か「!important」は使えないので、幅を指定したい場合はTwitterの埋め込みコードを直接変更すると良いです。
Instagramを中央寄せにする方法
/*Instagram中央寄せ*/
.instagram-center{
margin:0 auto;
}ついでに幅も指定したい場合は、これを追記します。
max-width:350px;
次に、埋め込みコードを<div class="instagram-center">で囲むと中央寄せにすることができます。
<div class="instagram-center">Instagram埋め込みコード</div>
ちなみに、このコードは効きませんでした。なんでだろ。
.instagram-media{margin:0 auto;}.instagram-container{margin:0 auto;}Googleマップ
マップの「共有」をクリック。
「地図を埋め込む」をクリックしてHTMLをコピー。
コピーしたHTMLを<div style="text-align:center;">で囲むとマップを中央寄せにすることができます。
<div style="text-align:center;">GoogleマップHTML</div>
もしくは、カスタムサイズを選択して横幅をサイトの横幅と同じにすると中央寄せっぽく見せることができます。
こんな感じ。
補足
「<div align="center">～</div>」や「<center>～</center>」は効くことは効くのですが、現在の HTML5 では廃止されているので使わない方が良いです。
また、<div style="text-align:center;">はテキストに対して使うものなので、<blockquote>要素や<iframe>要素には効きません。
