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

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

関連記事

リストメニューを順番に表示

メニューリストを横から順番に表示させる cssのみ

  cssだけで簡単にメニューなどのリストに動きを付けます。 今回は、右から現れてくるように作ってみました。 さっそくですが、以下にサンプルがありますので、興味がある方はコピペして使ってくだ …

メンバー紹介選手紹介

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

  1.プラグインAdvanced Custom Fieldsをインストール   左メニューのプラグイン→新規追加→検索窓に「Advanced Custom Fields」を入力す …

cmsとは

CMSとは

  CMSとは、コンテンツマネジメントシステム(content management system)の略で、簡単にいうと、ソフトの管理画面からテキストや画像などをHTMLが詳しくない方でも、 …

wordpressテーマ

WordPress無料有料【LIQUID PRESS】子テーマを作ろう

  プロが選ぶWordPressテーマテンプレート【LIQUID PRESS】   レスポンシブWordPressテーマ 「LIQUID PRESS」 累計2千DL突破! 日本語対 …

slick

IEでスライダーslickのフェードはチカチカする

  fade:trueはやめたほうがいい WordPressに導入するのに、とても使い勝手がいいjQueryの【slick】なんですが、オプションでフェードを選択するとIEでは、隠れていた部 …