実際のサイト
https://sirinova.com/sirius-css-tag.html
画像上にテキストを表示しているのですが、背景色をはみ出さいないように fit-contentを指定するとネガティブマージンで中央からずれてしまいます。
fit-content以外に(spanに対してのスタイル指定で)背景色をはみ出さないようする方法、またはネガティブマージンを効かせる方法を教えてください。
参考
テキストの背景色がはみ出ないようwidth: fit-contentを指定して、はみ出ないようにしています。
すると@media screen and (max-width: 767px)時のネガティブマージでセンタリングされず左側に寄ってしまいます。
コード
画像上にspanでテキストを表示しています。
<p class="txt-img timg-l"> <img src="./img/sirius-ec.png" alt=""> <span>CSS独自タグ一覧</span> </p>
!important;の多さにはお目こぼしください。
@media screen and (max-width: 767px) { .txt-img[style*="float"] { max-width: none !important; margin-left: -20px !important; margin-right: -20px !important; } .imgtext, .txt-img[style*="float"] { position: relative; overflow: hidden; width: -webkit-fit-content !important; width: -moz-fit-content !important; width: fit-content !important; } .txt-img[style*="float"] span { position: absolute; font-size: 4.0rem; font-weight: bold; line-height: 1.4; text-align: center; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); width: 100%; padding: 50% 5%; text-shadow: 0 0 10px rgba(0,0,0,0.35); color: #fff; background-color: rgba(0,0,0,.35); }
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。