[WordPress] テキスト応答ワードプレスのページに画像を垂直方向と水平方向に整列

スポンサーリンク

質問

ここでは取り組んでいるページ

の列を取得する究極のショートを使用して、応答します。今私は好ましくなく今の JS の画像を背景の w/テキストのホバリングを取得しようとしています。私が得ることができる高さと幅を定義が与えられた場合を完全に合わせることが、それが反応しない

の CodePen、それはすべての方法、ページ全体のタイトルを示していますが、究極のショート コード列を除去します。それはおそらく最高のデザインもない

ここですが、こだわっている今を取得する 20 の異なるチュートリアルについて従いました

CodePen

HTML:

<div id="portfolio_hover_wrapper">
<a href="//fast.wistia.net/embed/iframe/kwdjjpb040?popover=true" class="wistia-popover[height=720,playerColor=1bbbe6,width=1280]">
<img src="https://embed-ssl.wistia.com/deliveries/b9d3c0914d895ac2fb274c0c8798ad66f6e5d4f0.jpg?image_crop_resized=640x360" alt="" class="hover" />
<span class="portfolio-hover-text"><span>ADO Rowing</span></span>
</a>
<script charset="ISO-8859-1" src="//fast.wistia.com/assets/external/popover-v1.js"></script>
</div>

CSS:

#portfolio_hover_wrapper {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

#portfolio_hover_wrapper a {
  display: inline-block;
  width: 100%;
  height: 100%;  
  position: relative;
}


span.portfolio-hover-text {
  background: rgba(27,187,230,0.8);
  color: white;
  display: table;
  font-size: 3em;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  opacity: 0;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
}



#portfolio_hover_wrapper a:hover span.portfolio-hover-text {
    opacity: 1;
}

span.portfolio-hover-text span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

答え

かどうか私は理解する

.portfolio-hover-text

top: 50%; transform: translateY(-50%);

を使用してみてください

http://stackoverflow.com/questions/32486221/text-vertically-horizontally-aligned-on-image-on-responsive-wordpress-page

スポンサーリンク

Leave a Reply