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 api

Google Maps APIキー取得方法

Google Maps APIキー取得方法 Google Maps APIを取得する前に、Googleのアカウントを取得してください。 こちらから取得します → https://developers. …

子テーマ functions.php

WordPress 子テーマのcssを読み込む

  親テーマのスタイルシート【style.css】の上部には、各テーマによって若干違いはあるが、以下のような記述があると思います。 @charset “UTF-8”; /*——— …

ワードプレスにアメブロ

ワードプレスにアメブロ

  ワードプレスの固定ページにアメブロの記事を読み込む WordPressでホームページを作りたいけどアメブロを止めたくない ブログを作成するなら有名なアメブロが簡単で始めやすいので、今も更 …

選手登録メンバー登録

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

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

vegas動画と画像

画像と動画を混合させて表示VEGAS

動画も一緒に表示させる方法   動かしてみた方法は以下の通りです。   1.先に動画を表示して、次に画像を表示する方法   jQuery(document).ready( …