wordpress

指定した範囲内に画像を上下中央に配置

投稿日:

画像を上下中央に配置

 

divなどで指定した部分に、画像を配置

上下中央にする方法は他にもありますが、

今回は、『position』を使ってみます。

 

html

<div class="divbox">
<img src=xxxxx.jpg alt="xxxx" >
</div>

css

.divbox{
position: relative;
width:500px;
height:300px;
overflow:hidden;
}
.divbox img{
position: absolute;
top: 50%;
left: 0%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);

 
 
 

デモ↓

positionとtranslate

 
 



-wordpress
-,


comment

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

関連記事

Google Doc Embedder

WordPressでPDFを埋め込むプラグイン

  Google Doc Embedder   WordPressの記事内や固定ページ内で、PDFのファイルを利用したい、またはダウンロードできるようにしたい時に使うプラグインです …

ポップアップ・ライトボックス風

画像クリックで 違う画像やテキストの入ったBOXを表示させる

  プラグインなしで、別の画像やテキストをlightboxのように表示させる   html   <a class="item-demo"> …

選手登録メンバー登録

WordPress テーマLIQUID PRESSでメンバー紹介や選手一覧などを作ってみた④

  1.アイキャッチ画像をカスタマイズ   テーマによっては、変更しなくてもきれいに表示されることもあります。 メンバー紹介などの個人個人のページでは、300px×400pxの画像 …

masonry column

MasonryをやめてCSSのcolumnにした

  不具合連続のMasonry   2日間くらい「Masonry」に悩まされ、できたと思ったら不具合が発生の繰り返し、 主な不具合は、 ・画像と画像が重なる ・ブラウザを縮小したり …

divでtableを作ってみた

divでtableを作ってみた(レスポンシブ対応)

  display: flexでレスポンシブにも対応させた PCとスマホで見せ方を変えたかったので、cssで調整 PCでは横4列、スマホでは横2列で表示 通常の表が横に2つ並んでいるようなも …