如何对齐这些按钮？

Question

​

a.cr-button {
    border: solid blue;
}

.job-entry a {
    height: 65px;
    margin: 5px;
    display: block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
	<div class="btn-group-vertical col-md-offset-3 col-md-6 col-sm-offset-2 col-sm-8 col-xs-12" style="display:table;">
            <div class="job-entry row large-text" style="display:table-row;">
                <div style="display:table-cell;width:75px;">
                    <a class="btn cr-button pad">
                        <img src="http://dummyimage.com/64x64/000/fff" width="50">
                    </a>
                </div>
                <div style="display:table-cell">
                    <a class="btn cr-button pad-lg" href="#">Test Job 1</a>
                </div>
                <div style="display:table-cell;width:75px;">
                    <a href="/Builder/DeleteJob" class="btn cr-button pad">
                        <img src="http://dummyimage.com/64x64/000/fff" width="50">
                    </a>
                </div>
            </div>
    </div>

​

那我该怎么排列这三个锚呢？我在每个有意义的标记中尝试过vertical-align，而每个有意义的值都使用了它。

JsFiddle版本

Answer 1

您需要将div元素的vertical-align设置为top，而不是其中包含的a元素：

<div style="vertical-align:top; display:table-cell">
    <a class="btn cr-button pad-lg" href="#">Test Job 1</a>
</div>

Answer 2

就像这样

​

.cr-button {
    border: solid blue;
}

.job-entry a {
    height: 65px;
    margin: 5px;
    display: block;
}
.block{vertical-align: top;}

	<div class="btn-group-vertical col-md-offset-3 col-md-6 col-sm-offset-2 col-sm-8 col-xs-12" style="display:table;">
            <div class="job-entry row large-text" style="display:table-row;">
                <div class="block" style="display:table-cell;width:75px;">
                    <a class="btn cr-button pad">
                        <img src="http://dummyimage.com/64x64/000/fff" width="50">
                    </a>
                </div>
                <div class="block" style="display:table-cell">
                    <a class="btn cr-button pad-lg" href="#">Test Job 1</a>
                </div>
                <div class="block" style="display:table-cell;width:75px;">
                    <a href="/Builder/DeleteJob" class="btn cr-button pad">
                        <img src="http://dummyimage.com/64x64/000/fff" width="50">
                    </a>
                </div>
            </div>
    </div>

​