中心文字图像

-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

中心文字图像

回答

相关问题