人気の株主優待

weblovelog

ウェブ業界人のためのウェブ情報サイト。

absoluteポジションのオブジェクトを左右中央配置にする

   

準備

① 親要素にposition: relative; を設定
② 真ん中表示したいもの(今回、オブジェクトと呼び、幅 300px 高さ 200px とします )にposition: absolute;を設定

方法1

① leftに50%を設定
② オブジェクトの幅の半分のサイズ(width/2)だけ、ネガティブマージンで左に戻す。

方法2

① top,left,right,leftをauto以外の値にする。

方法2に関して、バシャログ。様の記事 ”CSSでblock要素を上下左右中央寄せにする、イマドキの方法。” でとても詳しく説明されています。

 - CSS, WEB

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

  関連記事