中心文字圖像

-3

的中間，我想垂直中心旁邊的文字上的圖像左，但似乎做中心文字圖像

.socialShare { 
 
    position: relative; 
 
    &__CTA { 
 
    position: absolute; 
 
    bottom: -30px; 
 
    background-color: #d0d0d0; 
 
    padding-right: 18px; 
 
    height: 38px; 
 
    img { 
 
     display: inline; 
 
     height: 38px; 
 
     width: 38px; 
 
    } 
 
    p { 
 
     display: inline; 
 
    } 
 
    } 
 
}

<div class="socialShare"> 
 
    <strong> 
 
       <img alt="" src="https://www.asthma.org.uk/globalassets/health-advice/asthma-attacks/what-to-do-if-youre-having-an-asthma-attack.jpg" height="350" width="700" /> 
 
      </strong> 
 
    <div class="socialShare__CTA"> 
 
    <img src="dist/images/arrow.jpg" alt=""> 
 
    <p>Share image</p> 
 
    </div>

繼承人的一個例子的codepen什麼我有。

CodePen Link

來源

2017-02-28 Samuel Gray

是這樣的嗎？ http://codepen.io/mcoker/pen/xqwPgE –

請在問題本身而不是第三方網站上提供[mcve]中的所有相關代碼。 –

[在HTML圖像上水平垂直居中文本（絕對定位）]的可能重複（http://stackoverflow.com/questions/34955797/horizontally-vertically-center-text-over-an-html-image-absolute-定位） –

假設你正在談論在頁面底部的分享按鈕，只需添加vertical-align: middle;到圖像的CSS屬性將垂直居中旁邊的文本。

來源

2017-02-28 16:23:44

向img元素添加一個垂直對齊，以將正在處理的文本拉到外部div標記的中心。像這樣：

img { 

    display: inline; 
    height: 38px; 
    width: 38px; 

    vertical-align: middle; 
    }

來源

2017-02-28 16:26:47

我相信你與你的CSS一些嵌套錯誤以及你也有高度，哪些應該被移動到你的CSS圖片寬度屬性

.socialShare { 
 
    position: relative; 
 
} 
 

 
.socialShare strong img { 
 
    height: "350px"; 
 
    width: "700px"; 
 
} 
 

 
.socialShare__CTA { 
 
    position: absolute; 
 
    bottom: -30px; 
 
    background-color: #d0d0d0; 
 
    padding-right: 18px; 
 
    height: 38px; 
 
} 
 

 
.socialShare__CTA img { 
 
    display: inline; 
 
    height: 38px; 
 
    width: 38px; 
 
    vertical-align: middle; 
 
    /* <-- add this line */ 
 
} 
 

 
p { 
 
    display: inline; 
 
}

<div class="socialShare"> 
 
    <strong> 
 
    <img alt="" src="https://www.asthma.org.uk/globalassets/health-advice/asthma-attacks/what-to-do-if-youre-having-an-asthma-attack.jpg" /> 
 
    </strong> 
 

 
    <div class="socialShare__CTA"> 
 
    <img src="dist/images/arrow.jpg" alt=""> 
 
    <p>Share image</p> 
 
    </div> 
 

 
</div>

來源

2017-02-28 16:54:35 happymacarts

中心文字圖像

回答

相關問題