Question

我正在尝试将文字与我的图像垂直居中对齐。目前，文本看起来像是在图像的底部对齐。

这是我的jsfiddle： http://jsfiddle.net/huskydawgs/L5Le0w37/7/

这是我的HTML：

    <div class="column-resources-box">
    <a href="http://en.wikipedia.org/wiki/Apple"><img alt="Apples" height="50" src="http://www.clipartbest.com/cliparts/acq/ezj/acqezjKcM.jpeg" width="50" /></a>

<h4 class="title-bar">Apple<br>
    Center</h4>

<ul>
    <li>Gala</li>
    <li>Pink Lady</li>
    <li>Fuji</li>
</ul>
</div>

Here's my CSS:

        .column-resources-box {
        width: 200px;
        float: left;
        margin: 15px;
    }

        .column-resources-box img {
    margin:0 2%;
    float:left;
    height:50px;
    width:50px;
}
        }

h4.title-bar {
    color: #2251a4;
    background: none;
    font-family: 'Arial', inherit;
    font-weight: normal;
    text-transform: none;
    line-height: normal;
    margin: 0;
    padding: 0;
    text-align: left;
}

Answer 1

试一试。我将你想要居中的两个项目包裹在div中，然后使图像居中。

.wrap {
    display:inline
}
.apple_image {
    vertical-align:middle
}    

.column-resources-box {
        width: 200px;
        float: left;
        margin: 15px;
    }

        .column-resources-box img {
    margin:0 2%;
    float:left;
    height:50px;
    width:50px;
}
        }

h4.title-bar {
    color: #2251a4;
    background: none;
    font-family: 'Arial', inherit;
    font-weight: normal;
    text-transform: none;
    line-height: normal;
    margin: 0 0 0 0;
    padding: 0;
    text-align: left;
}

<div class="column-resources-box">
    <div class="wrap">
        <a class="apple_image" href="http://en.wikipedia.org/wiki/Apple">
            <img alt="Apples" height="50" src="http://www.clipartbest.com/cliparts/acq/ezj/acqezjKcM.jpeg" width="50" />
        </a>

        <h4 class="title-bar">AppleCenter</h4>
    </div>
<ul>
	<li>Gala</li>
	<li>Pink Lady</li>
	<li>Fuji</li>
</ul>
</div>

Answer 2

您的CSS中存在语法错误。这是你的CSS，摘自顶部：

        .column-resources-box {
        width: 200px;
        float: left;
        margin: 15px;
    }

        .column-resources-box img {
    margin:0 2%;
    float:left;
    height:50px;
    width:50px;
}
        }

注意无关紧密的支撑。这似乎阻止了浏览器进入剩余的CSS。

修正：http://jsfiddle.net/L5Le0w37/13/

您可以将其向下移动一点，以position:relative; top:7px;：

为中心

居中：http://jsfiddle.net/L5Le0w37/16/

Answer 3

您可以使用绝对定位将事物准确地放在您想要的位置。

小提琴：http://jsfiddle.net/t8rL871j/

＆＃13;

    .column-resources-box {
        width: 200px;
        float: left;
        margin: 15px;
        position: relative;
    }
    .column-resources-box img {
        margin:0 2%;
        height:50px;
        width:50px;
        position: absolute;
    }
    h4.title-bar {
        color: #2251a4;
        background: none;
        font-family:'Arial', inherit;
        font-weight: normal;
        text-transform: none;
        line-height: normal;
        margin: 0 0 0 0;
        padding: 0;
        text-align: left;
        position: absolute;
        top: 10px;
        left: 60px;
    }

    .column-resources-box ul {
        margin:60px 2%;
        height:50px;
        width:70px;
        position: absolute;
    }

＆＃13;

<div class="column-resources-box"> <a href="http://en.wikipedia.org/wiki/Apple"><img alt="Apples" height="50" src="http://www.clipartbest.com/cliparts/acq/ezj/acqezjKcM.jpeg" width="50" /></a>

    
<h4 class="title-bar">Apple<br>
    Center</h4>

    <ul>
        <li>Gala</li>
        <li>Pink Lady</li>
        <li>Fuji</li>
    </ul>
</div>

＆＃13;

Answer 4

我重写了一下你的代码，但这是使用顶部填充的另一种可能方式..

vertical-align: top;
padding: 4px 0px 0px 0px; /* adjust top padding */

http://jsfiddle.net/Hastig/mj5yzsr7/3/

您可以使用h4.title-bar { line-height: 25px; }调整 Apple 和中心之间的间距，然后调整顶部填充以进行补偿。

Answer 5

将文字和图片包裹在div内并按照以下方式设置样式：

HTML

<div class="appleWrapper">
    <a href="http://en.wikipedia.org/wiki/Apple"><img alt="Apples" height="50" src="http://www.clipartbest.com/cliparts/acq/ezj/acqezjKcM.jpeg" width="50" /></a>
    <h4 class="title-bar">Apple<br>Center</h4>
</div>

CSS

.appleWrapper {
    height: 50px;
}
.title-bar {
    margin: 0;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

查看online example here

如何使文本与我的图像垂直对齐

5 个答案: