Question

我一直在试图将图像和文本垂直居中放在一起。我不能让图像与文本对齐，即使我认为它是居中的，改变浏览器大小也会使它失去它。

＆＃13;

.icon-button-with-text-wrapper {
    border: 1px solid #7e898a;
    background-color: white;
    box-sizing: border-box;
    display: table;
    margin-top: 10px;
    padding: 10px;
    font-size: 1.5em;
    width: 100%;
    height: 100%;
}
.icon-button-with-text-wrapper img {
    margin-right: 10px;
    max-height: 50px;
    max-width: 50px;
    vertical-align: middle;
    float: left;

}

p {
    vertical-align: middle;
}
}

＆＃13;

<div class="icon-button-with-text-wrapper"><img typeof="foaf:Image" src="http://i.imgur.com/YjcaGSx.png" width="100" height="100" style="
    padding-top: 10p;
" align="middle"><p>Speak to an Admissions Counselor<p></div>

＆＃13;

我已经尝试了vertical-align: middle，display: table-cell（和其他人）以及不同的位置，同时调整了身高，边距等等。我还看了几个其他类似的问题包括this one，this one和this one。但是，这些都没有提供在这种情况下有效的解决方案。

Answer 1

也许是这样？

*{
    padding: 0;
    margin: 0;
     box-sizing: border-box;
}

.icon-button-with-text-wrapper {
    border: 1px solid #7e898a;
    background-color: white;   
    display: table;
    margin-top: 10px;
    padding: 10px;
    font-size: 1.5em;
    width: 100%;
    height: 100%;
}
.icon-button-with-text-wrapper > .item{
    display: table-cell;
    vertical-align: middle;    
}
.icon-button-with-text-wrapper > .item:nth-of-type(1){
    width: 60px;
    text-align: center;
}
.icon-button-with-text-wrapper img {   
    max-height: 50px;
    max-width: 50px;    
}

<div class="icon-button-with-text-wrapper">
    <div class="item">
        <img src="http://i.imgur.com/YjcaGSx.png" alt="" />
     </div>
     <div class="item">  
        <p>Speak to an Admissions Counselor<p>
      </div>
 </div>

Fiddle

Answer 2

希望这会有所帮助。

<html>
    <head>
        <title>Flaticon WebFont</title>

        <style>
            .icon-button-with-text-wrapper {
                border: 1px solid #444;
                box-sizing: border-box;
                padding: 10px;
                font-size: 1.0em;
                vertical-align: middle;
                font-size: 1.3em;
            }
            .icon-button-with-text-wrapper img {
                width: 50px;
                height: 50px;
                float: left;
                vertical-align: middle;
                padding: 10px;
            }
        </style>


    </head>

    <body>


        <div class="icon-button-with-text-wrapper">
            <img typeof="foaf:Image" src="http://i.imgur.com/YjcaGSx.png">
            <p>Speak to an Admissions Counselor<p>
        </div>


    </body>
</html>

Answer 3

您不需要浮动图像或将文本放在自己的块中（p）。

＆＃13;

ViewBag

＆＃13;

.icon-button-with-text-wrapper {
    border: 1px solid #7e898a;
    background-color: white;
    box-sizing: border-box;
    display: table;
    margin-top: 10px;
    padding: 10px;
    font-size: 1.5em;
    width: 100%;
    height: 100%;
}
.icon-button-with-text-wrapper img {
    margin-right: 10px;
    max-height: 50px;
    max-width: 50px;
    vertical-align: middle;

}

＆＃13;

将图像与文本对齐

3 个答案: